reis-mobile 0.3.6 → 0.4.0

package/skills/android-display-glasses-with-jetpack-compose-glimmer/references/deptheffect-source.md

@@ -0,0 +1,224 @@
+When simulating depth on AI glasses using shadows, refer to the following source
+code in `DepthEffect.kt`:
+
+
+```kotlin
+/*
+ * Copyright 2025 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.
+ */
+
+package androidx.xr.glimmer
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.ShadowScope
+import androidx.compose.ui.draw.dropShadow
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.DefaultAlpha
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.drawscope.ContentDrawScope
+import androidx.compose.ui.graphics.shadow.DropShadowPainter
+import androidx.compose.ui.graphics.shadow.Shadow
+import androidx.compose.ui.graphics.shadow.lerp
+import androidx.compose.ui.node.DrawModifierNode
+import androidx.compose.ui.node.ModifierNodeElement
+import androidx.compose.ui.node.requireGraphicsContext
+import androidx.compose.ui.platform.InspectorInfo
+
+/**
+ * The depth effect establishes a sense of hierarchy by using shadows to occlude content underneath.
+ * It consists of two shadow layers, [layer1] and [layer2]. [layer2] is drawn on top of [layer1]:
+ *
+ *     _________________
+ *    |    _________    |
+ *    |   | content |   |
+ *    |   |_________|   |
+ *    |   ___________   |
+ *    |  |  layer 2  |  |
+ *    |  |___________|  |
+ *    |  _____________  |
+ *    | |   layer 1   | |
+ *    | |_____________| |
+ *    |_________________|
+ *
+ * [GlimmerTheme.depthEffectLevels] provides theme defined depth effect levels that should be used
+ * to add depth to surfaces.
+ *
+ * Higher level components apply the depth effect automatically when needed. The depth effect can
+ * also be configured through [surface]. To manually render depth shadows for advanced use-cases,
+ * see the [depthEffect] [Modifier].
+ *
+ * @property layer1 the 'base' [Shadow] layer, drawn first
+ * @property layer2 the second [Shadow] layer, drawn on top of [layer1]
+ */
+@Immutable
+public class DepthEffect(public val layer1: Shadow, public val layer2: Shadow) {
+    override fun equals(other: Any?): Boolean {
+        if (this === other) return true
+        if (other !is DepthEffect) return false
+
+        if (layer1 != other.layer1) return false
+        if (layer2 != other.layer2) return false
+
+        return true
+    }
+
+    override fun hashCode(): Int {
+        var result = layer1.hashCode()
+        result = 31 * result + layer2.hashCode()
+        return result
+    }
+}
+
+/**
+ * Renders shadows for the provided [depthEffect].
+ *
+ * @param depthEffect Depth effect to render shadows for. If `null`, no shadows will be rendered.
+ * @param shape [Shape] of the shadows
+ */
+public fun Modifier.depthEffect(depthEffect: DepthEffect?, shape: Shape): Modifier {
+    if (depthEffect == null) return this
+    return this then DepthEffectElement(depthEffect, shape)
+}
+
+/**
+ * Renders depth effect shadows by lerping between the provided [from] and [to] depth effects using
+ * [progress]. This allows for efficient animation - to render a static depth effect, see the other
+ * overload.
+ *
+ * @param from Depth effect to render shadows for when [progress] is 0.
+ * @param to Depth effect to render shadows for when [progress] is 1.
+ * @param shape [Shape] of the shadows
+ * @param progress progress of the animation between [from] and [to], from 0 to 1. Values may go
+ *   outside these bounds for overshoot / undershoot.
+ */
+// TODO: can be simplified with style API in the future
+internal fun Modifier.depthEffect(
+    from: DepthEffect?,
+    to: DepthEffect?,
+    shape: Shape,
+    progress: () -> Float,
+): Modifier {
+    // dropShadow draws the shadow, and then the content on top. So in order to get layer2 to
+    // render on top of layer1, we draw layer1 first - this means that layer1's dropShadow will
+    // draw its shadow, and then its content on top (since the 'content' includes children
+    // modifiers, this includes layer2's shadow).
+    return this.dropShadow(shape) {
+            val shadow = lerp(from?.layer1, to?.layer1, progress())
+            if (shadow != null) {
+                updateFrom(shadow)
+            }
+        }
+        .dropShadow(shape) {
+            val shadow = lerp(from?.layer2, to?.layer2, progress())
+            if (shadow != null) {
+                updateFrom(shadow)
+            }
+        }
+}
+
+private fun ShadowScope.updateFrom(shadow: Shadow) {
+    this.radius = shadow.radius.toPx()
+    this.spread = shadow.spread.toPx()
+    this.offset = Offset(shadow.offset.x.toPx(), shadow.offset.y.toPx())
+    this.color = shadow.color
+    this.brush = shadow.brush
+    this.alpha = shadow.alpha
+    this.blendMode = shadow.blendMode
+}
+
+private class DepthEffectElement(private val depthEffect: DepthEffect, private val shape: Shape) :
+    ModifierNodeElement<DepthEffectNode>() {
+
+    override fun create(): DepthEffectNode = DepthEffectNode(depthEffect, shape)
+
+    override fun update(node: DepthEffectNode) {
+        node.update(depthEffect, shape)
+    }
+
+    override fun equals(other: Any?): Boolean {
+        if (this === other) return true
+        if (other !is DepthEffectElement) return false
+
+        if (depthEffect != other.depthEffect) return false
+        if (shape != other.shape) return false
+
+        return true
+    }
+
+    override fun hashCode(): Int {
+        var result = depthEffect.hashCode()
+        result = 31 * result + shape.hashCode()
+        return result
+    }
+
+    override fun InspectorInfo.inspectableProperties() {
+        name = "depthEffect"
+        properties["depthEffect"] = depthEffect
+        properties["shape"] = shape
+    }
+}
+
+/**
+ * Renders shadows for the provided [shape] and [depthEffect].
+ *
+ * @param depthEffect Depth effect to render shadows for.
+ * @param shape [Shape] of the shadows.
+ */
+internal class DepthEffectNode(private var depthEffect: DepthEffect, private var shape: Shape) :
+    Modifier.Node(), DrawModifierNode {
+
+    private var layer1ShadowPainter: DropShadowPainter? = null
+    private var layer2ShadowPainter: DropShadowPainter? = null
+
+    fun update(depthEffect: DepthEffect, shape: Shape) {
+        if (this.depthEffect.layer1 != depthEffect.layer1) layer1ShadowPainter = null
+        if (this.depthEffect.layer2 != depthEffect.layer2) layer2ShadowPainter = null
+        if (this.shape != shape) {
+            layer1ShadowPainter = null
+            layer2ShadowPainter = null
+        }
+        this.shape = shape
+        this.depthEffect = depthEffect
+    }
+
+    override fun ContentDrawScope.draw() {
+        drawDepthEffect()
+        drawContent()
+    }
+
+    internal fun ContentDrawScope.drawDepthEffect(alpha: Float = DefaultAlpha) {
+        // In order to get layer2 to render on top of layer1, we draw layer1 first.
+        with(obtainLayer1ShadowPainter()) { draw(size, alpha = alpha) }
+        with(obtainLayer2ShadowPainter()) { draw(size, alpha = alpha) }
+    }
+
+    private fun obtainLayer1ShadowPainter(): DropShadowPainter =
+        layer1ShadowPainter
+            ?: requireGraphicsContext()
+                .shadowContext
+                .createDropShadowPainter(shape, depthEffect.layer1)
+                .also { layer1ShadowPainter = it }
+
+    private fun obtainLayer2ShadowPainter(): DropShadowPainter =
+        layer2ShadowPainter
+            ?: requireGraphicsContext()
+                .shadowContext
+                .createDropShadowPainter(shape, depthEffect.layer2)
+                .also { layer2ShadowPainter = it }
+}
+```
+
+<br />

package/skills/android-display-glasses-with-jetpack-compose-glimmer/references/deptheffectlevels-source.md

@@ -0,0 +1,105 @@
+When simulating depth on AI glasses using shadows, refer to the following source
+code in `DepthEffectLevels.kt`:
+
+
+```kotlin
+/*
+ * Copyright 2025 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.
+ */
+
+package androidx.xr.glimmer
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.shadow.Shadow
+import androidx.compose.ui.unit.dp
+
+/**
+ * Jetpack Compose Glimmer components can use [DepthEffect] to establish a sense of hierarchy.
+ * [DepthEffectLevels] contains different levels of [DepthEffect] to express this hierarchy. Higher
+ * levels contain larger shadows, and represent components with a higher z-order than lower levels.
+ * In their baseline state (not focused) most components should have no (`null`) [DepthEffect].
+ *
+ * @property level1 the lowest level of [DepthEffect]. This level will have the smallest shadows.
+ * @property level2 a level of [DepthEffect] higher than [level1] and lower than [level3].
+ * @property level3 a level of [DepthEffect] higher than [level2] and lower than [level4].
+ * @property level4 a level of [DepthEffect] higher than [level3] and lower than [level5].
+ * @property level5 the highest level of [DepthEffect]. This level will have the largest shadows.
+ * @see DepthEffect
+ * @see depthEffect
+ */
+@Immutable
+public class DepthEffectLevels(
+    public val level1: DepthEffect = DepthEffectLevel1,
+    public val level2: DepthEffect = DepthEffectLevel2,
+    public val level3: DepthEffect = DepthEffectLevel3,
+    public val level4: DepthEffect = DepthEffectLevel4,
+    public val level5: DepthEffect = DepthEffectLevel5,
+) {
+    override fun equals(other: Any?): Boolean {
+        if (this === other) return true
+        if (other !is DepthEffectLevels) return false
+
+        if (level1 != other.level1) return false
+        if (level2 != other.level2) return false
+        if (level3 != other.level3) return false
+        if (level4 != other.level4) return false
+        if (level5 != other.level5) return false
+
+        return true
+    }
+
+    override fun hashCode(): Int {
+        var result = level1.hashCode()
+        result = 31 * result + level2.hashCode()
+        result = 31 * result + level3.hashCode()
+        result = 31 * result + level4.hashCode()
+        result = 31 * result + level5.hashCode()
+        return result
+    }
+
+    override fun toString(): String {
+        return "DepthEffectLevels(level1=$level1, level2=$level2, level3=$level3, level4=$level4, level5=$level5)"
+    }
+}
+
+private val DepthEffectLevel1 =
+    DepthEffect(
+        layer1 = Shadow(radius = 12.dp, color = Color.Black, spread = 6.dp, alpha = 0.90f),
+        layer2 = Shadow(radius = 6.dp, color = Color.Black, spread = 2.dp),
+    )
+private val DepthEffectLevel2 =
+    DepthEffect(
+        layer1 = Shadow(radius = 23.dp, color = Color.Black, spread = 13.dp, alpha = 0.90f),
+        layer2 = Shadow(radius = 8.dp, color = Color.Black, spread = 5.dp),
+    )
+private val DepthEffectLevel3 =
+    DepthEffect(
+        layer1 = Shadow(radius = 34.dp, color = Color.Black, spread = 19.dp, alpha = 0.90f),
+        layer2 = Shadow(radius = 9.dp, color = Color.Black, spread = 7.dp),
+    )
+private val DepthEffectLevel4 =
+    DepthEffect(
+        layer1 = Shadow(radius = 45.dp, color = Color.Black, spread = 26.dp, alpha = 0.90f),
+        layer2 = Shadow(radius = 11.dp, color = Color.Black, spread = 10.dp),
+    )
+private val DepthEffectLevel5 =
+    DepthEffect(
+        layer1 = Shadow(radius = 56.dp, color = Color.Black, spread = 32.dp, alpha = 0.90f),
+        layer2 = Shadow(radius = 12.dp, color = Color.Black, spread = 12.dp),
+    )
+```
+
+<br />

package/skills/android-display-glasses-with-jetpack-compose-glimmer/references/glimmersansflextypography-source.md

@@ -0,0 +1,270 @@
+When creating a `Typography` instance with the Google Sans Flex configuration,
+refer to the following source code in `GoogleSansFlexTypography.kt`:
+
+
+```kotlin
+/*
+ * Copyright 2026 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.
+ */
+
+@file:Suppress("MentionsGoogle")
+
+package androidx.xr.glimmer.googlefonts
+
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontVariation
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.googlefonts.Font
+import androidx.compose.ui.text.googlefonts.GoogleFont
+import androidx.compose.ui.text.style.LineHeightStyle
+import androidx.compose.ui.unit.sp
+import androidx.xr.glimmer.Typography
+
+/**
+ * Returns a [Typography] instance configured with Google Sans Flex and customized with the
+ * recommended settings for Jetpack Compose Glimmer.
+ *
+ * Note: Google Sans Flex is a variable font. It is recommended to configure attributes such as
+ * weight, slant, and grade by using [FontVariation.Settings] (e.g. [FontVariation.weight]) rather
+ * than the [TextStyle] properties.
+ *
+ * @sample androidx.xr.glimmer.googlefonts.samples.GoogleSansFlexTypographySample
+ * @param titleLarge the [TextStyle] for [Typography.titleLarge]
+ * @param titleLargeVariationSettings the [FontVariation.Settings] for [Typography.titleLarge].
+ * @param titleMedium the [TextStyle] for [Typography.titleMedium].
+ * @param titleMediumVariationSettings the [FontVariation.Settings] for [Typography.titleMedium].
+ * @param titleSmall the [TextStyle] for [Typography.titleSmall].
+ * @param titleSmallVariationSettings the [FontVariation.Settings] for [Typography.titleSmall].
+ * @param bodyLarge the [TextStyle] for [Typography.bodyLarge].
+ * @param bodyLargeVariationSettings the [FontVariation.Settings] for [Typography.bodyLarge].
+ * @param bodyMedium the [TextStyle] for [Typography.bodyMedium].
+ * @param bodyMediumVariationSettings the [FontVariation.Settings] for [Typography.bodyMedium].
+ * @param bodySmall the [TextStyle] for [Typography.bodySmall].
+ * @param bodySmallVariationSettings the [FontVariation.Settings] for [Typography.bodySmall].
+ * @param caption the [TextStyle] for [Typography.caption].
+ * @param captionVariationSettings the [FontVariation.Settings] for [Typography.caption].
+ */
+@Suppress("MentionsGoogle")
+public fun createGoogleSansFlexTypography(
+    titleLarge: TextStyle = GoogleSansFlexTypographyDefaults.TitleLarge,
+    titleLargeVariationSettings: FontVariation.Settings =
+        GoogleSansFlexTypographyDefaults.TitleLargeVariationSettings,
+    titleMedium: TextStyle = GoogleSansFlexTypographyDefaults.TitleMedium,
+    titleMediumVariationSettings: FontVariation.Settings =
+        GoogleSansFlexTypographyDefaults.TitleMediumVariationSettings,
+    titleSmall: TextStyle = GoogleSansFlexTypographyDefaults.TitleSmall,
+    titleSmallVariationSettings: FontVariation.Settings =
+        GoogleSansFlexTypographyDefaults.TitleSmallVariationSettings,
+    bodyLarge: TextStyle = GoogleSansFlexTypographyDefaults.BodyLarge,
+    bodyLargeVariationSettings: FontVariation.Settings =
+        GoogleSansFlexTypographyDefaults.BodyLargeVariationSettings,
+    bodyMedium: TextStyle = GoogleSansFlexTypographyDefaults.BodyMedium,
+    bodyMediumVariationSettings: FontVariation.Settings =
+        GoogleSansFlexTypographyDefaults.BodyMediumVariationSettings,
+    bodySmall: TextStyle = GoogleSansFlexTypographyDefaults.BodySmall,
+    bodySmallVariationSettings: FontVariation.Settings =
+        GoogleSansFlexTypographyDefaults.BodySmallVariationSettings,
+    caption: TextStyle = GoogleSansFlexTypographyDefaults.Caption,
+    captionVariationSettings: FontVariation.Settings =
+        GoogleSansFlexTypographyDefaults.CaptionVariationSettings,
+): Typography {
+    val titleLargeFontFamily = FontFamily(GoogleSansFlexFont, titleLargeVariationSettings)
+    val titleMediumFontFamily = FontFamily(GoogleSansFlexFont, titleMediumVariationSettings)
+    val titleSmallFontFamily = FontFamily(GoogleSansFlexFont, titleSmallVariationSettings)
+    val bodyLargeFontFamily = FontFamily(GoogleSansFlexFont, bodyLargeVariationSettings)
+    val bodyMediumFontFamily = FontFamily(GoogleSansFlexFont, bodyMediumVariationSettings)
+    val bodySmallFontFamily = FontFamily(GoogleSansFlexFont, bodySmallVariationSettings)
+    val captionFontFamily = FontFamily(GoogleSansFlexFont, captionVariationSettings)
+
+    return Typography(
+        titleLarge = titleLarge.copy(fontFamily = titleLargeFontFamily),
+        titleMedium = titleMedium.copy(fontFamily = titleMediumFontFamily),
+        titleSmall = titleSmall.copy(fontFamily = titleSmallFontFamily),
+        bodyLarge = bodyLarge.copy(fontFamily = bodyLargeFontFamily),
+        bodyMedium = bodyMedium.copy(fontFamily = bodyMediumFontFamily),
+        bodySmall = bodySmall.copy(fontFamily = bodySmallFontFamily),
+        caption = caption.copy(fontFamily = captionFontFamily),
+    )
+}
+
+/** Default variable font configurations for using Google Sans Flex in Jetpack Compose Glimmer */
+@Suppress("MentionsGoogle")
+public object GoogleSansFlexTypographyDefaults {
+    private val RoundVariationSetting = FontVariation.Setting("ROND", 100.0f)
+
+    /** Default [TextStyle] for [Typography.titleLarge]. */
+    public val TitleLarge: TextStyle =
+        TextStyle(
+            fontWeight = FontWeight.Normal,
+            fontSize = 30.sp,
+            lineHeight = 36.sp,
+            letterSpacing = DefaultLetterSpacing,
+            lineHeightStyle = DefaultLineHeightStyle,
+        )
+
+    /** Default [FontVariation.Settings] for [Typography.titleLarge]. */
+    public val TitleLargeVariationSettings: FontVariation.Settings =
+        FontVariation.Settings(
+            FontVariation.grade(0),
+            FontVariation.weight(750),
+            FontVariation.slant(0f),
+            FontVariation.width(100f),
+            FontVariation.opticalSizing(9.sp),
+            RoundVariationSetting,
+        )
+
+    /** Default [TextStyle] for [Typography.titleMedium]. */
+    public val TitleMedium: TextStyle =
+        TextStyle(
+            fontWeight = FontWeight.Normal,
+            fontSize = 24.sp,
+            lineHeight = 28.sp,
+            letterSpacing = DefaultLetterSpacing,
+            lineHeightStyle = DefaultLineHeightStyle,
+        )
+
+    /** Default [FontVariation.Settings] for [Typography.titleMedium]. */
+    public val TitleMediumVariationSettings: FontVariation.Settings =
+        FontVariation.Settings(
+            FontVariation.grade(0),
+            FontVariation.weight(750),
+            FontVariation.slant(0f),
+            FontVariation.width(100f),
+            FontVariation.opticalSizing(9.sp),
+            RoundVariationSetting,
+        )
+
+    /** Default [TextStyle] for [Typography.titleSmall]. */
+    public val TitleSmall: TextStyle =
+        TextStyle(
+            fontWeight = FontWeight.Normal,
+            fontSize = 20.sp,
+            lineHeight = 28.sp,
+            letterSpacing = DefaultLetterSpacing,
+            lineHeightStyle = DefaultLineHeightStyle,
+        )
+
+    /** Default [FontVariation.Settings] for [Typography.titleSmall]. */
+    public val TitleSmallVariationSettings: FontVariation.Settings =
+        FontVariation.Settings(
+            FontVariation.grade(0),
+            FontVariation.weight(750),
+            FontVariation.slant(0f),
+            FontVariation.width(100f),
+            FontVariation.opticalSizing(9.sp),
+            RoundVariationSetting,
+        )
+
+    /** Default [TextStyle] for [Typography.bodyLarge]. */
+    public val BodyLarge: TextStyle =
+        TextStyle(
+            fontWeight = FontWeight.Normal,
+            fontSize = 30.sp,
+            lineHeight = 36.sp,
+            letterSpacing = DefaultLetterSpacing,
+            lineHeightStyle = DefaultLineHeightStyle,
+        )
+
+    /** Default [FontVariation.Settings] for [Typography.bodyLarge]. */
+    public val BodyLargeVariationSettings: FontVariation.Settings =
+        FontVariation.Settings(
+            FontVariation.grade(0),
+            FontVariation.weight(520),
+            FontVariation.slant(0f),
+            FontVariation.width(100f),
+            FontVariation.opticalSizing(9.sp),
+            RoundVariationSetting,
+        )
+
+    /** Default [TextStyle] for [Typography.bodyMedium]. */
+    public val BodyMedium: TextStyle =
+        TextStyle(
+            fontWeight = FontWeight.Normal,
+            fontSize = 24.sp,
+            lineHeight = 36.sp,
+            letterSpacing = DefaultLetterSpacing,
+            lineHeightStyle = DefaultLineHeightStyle,
+        )
+
+    /** Default [FontVariation.Settings] for [Typography.bodyMedium]. */
+    public val BodyMediumVariationSettings: FontVariation.Settings =
+        FontVariation.Settings(
+            FontVariation.grade(0),
+            FontVariation.weight(520),
+            FontVariation.slant(0f),
+            FontVariation.width(100f),
+            FontVariation.opticalSizing(9.sp),
+            RoundVariationSetting,
+        )
+
+    /** Default [TextStyle] for [Typography.bodySmall]. */
+    public val BodySmall: TextStyle =
+        TextStyle(
+            fontWeight = FontWeight.Normal,
+            fontSize = 20.sp,
+            lineHeight = 28.sp,
+            letterSpacing = DefaultLetterSpacing,
+            lineHeightStyle = DefaultLineHeightStyle,
+        )
+
+    /** Default [FontVariation.Settings] for [Typography.bodySmall]. */
+    public val BodySmallVariationSettings: FontVariation.Settings =
+        FontVariation.Settings(
+            FontVariation.grade(0),
+            FontVariation.weight(520),
+            FontVariation.slant(0f),
+            FontVariation.width(100f),
+            FontVariation.opticalSizing(9.sp),
+            RoundVariationSetting,
+        )
+
+    /** Default [TextStyle] for [Typography.caption]. */
+    public val Caption: TextStyle =
+        TextStyle(
+            fontWeight = FontWeight.Normal,
+            fontSize = 18.sp,
+            lineHeight = 24.sp,
+            letterSpacing = DefaultLetterSpacing,
+            lineHeightStyle = DefaultLineHeightStyle,
+        )
+
+    /** Default [FontVariation.Settings] for [Typography.caption]. */
+    public val CaptionVariationSettings: FontVariation.Settings =
+        FontVariation.Settings(
+            FontVariation.grade(0),
+            FontVariation.weight(650),
+            FontVariation.slant(0f),
+            FontVariation.width(100f),
+            FontVariation.opticalSizing(9.sp),
+            RoundVariationSetting,
+        )
+}
+
+private val GoogleSansFlexFont = GoogleFont("Google Sans Flex")
+
+private val DefaultLetterSpacing = 0.sp
+
+private val DefaultLineHeightStyle: LineHeightStyle =
+    LineHeightStyle(
+        alignment = LineHeightStyle.Alignment.Proportional,
+        trim = LineHeightStyle.Trim.FirstLineTop,
+    )
+
+private fun FontFamily(font: GoogleFont, variationSettings: FontVariation.Settings): FontFamily =
+    FontFamily(Font(googleFont = font, variationSettings = variationSettings))
+```
+
+<br />