# Panera (iOS) — Jetpack Compose Implementation Guide

Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Panera's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, the order/rewards spine, motion, and haptics.

> Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral. This file keeps the *visual* identity (Panera's bakery-warm cream canvas, single Panera Green action color, food-photo-first cards, MyPanera rewards engine) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `ModalBottomSheet` instead of a SwiftUI sheet, `sp`/`dp` instead of `pt`.

Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and Coil `2.6+` for food photography. No color extraction — Panera's palette is a fixed warm brand set, so Palette is not needed. Panera is light-first (bakery-warm); a full warm dark scheme is provided.

## 1. Color Tokens

```kotlin
// ui/theme/PaneraColors.kt
import androidx.compose.ui.graphics.Color

object PaneraColors {
    // Canvas & Surfaces (Light)
    val Canvas         = Color(0xFFFFFFFF)
    val Cream          = Color(0xFFF4EFE1)
    val Oat            = Color(0xFFFAF6EC)
    val SurfacePressed = Color(0xFFEDE6D4)
    val Divider        = Color(0xFFE7E0CF)

    // Canvas & Surfaces (Dark) — warm near-black, NOT cold gray
    val DarkCanvas   = Color(0xFF14140F)
    val DarkSurface1 = Color(0xFF1E1E18)
    val DarkSurface2 = Color(0xFF28281F)
    val DarkDivider  = Color(0xFF33332A)

    // Text — warm dark, NOT pure black
    val TextPrimary       = Color(0xFF2A2A1F)
    val TextSecondary     = Color(0xFF6C6655)
    val TextTertiary      = Color(0xFF9C9684)
    val DarkTextPrimary   = Color(0xFFF3EFE4)
    val DarkTextSecondary = Color(0xFFB4AE9C)

    // Brand (single action color)
    val Green        = Color(0xFF4C8B2B)
    val GreenBright  = Color(0xFF6BBE45) // dark-mode CTA / emphasis
    val GreenPressed = Color(0xFF3C6E22)
    val GreenTint    = Color(0xFFEAF3E3)
    val GreenTintDk  = Color(0xFF1E2A18)

    // Photographic accents
    val BreadTan   = Color(0xFFD8B271)
    val SoupOrange = Color(0xFFE07A2F)
    val Berry      = Color(0xFFB0324B)
    val GoldStar   = Color(0xFFF2B705)
    val SipCoffee  = Color(0xFF5A3A22)

    // Semantic
    val Error     = Color(0xFFD6452F)
    val ErrorDark = Color(0xFFE0594B)
}
```

Wire it into both schemes. Panera is light-first (bakery cream); the dark scheme uses the warm `#14140F`, never cold gray or true black, with `GreenBright` as the primary so CTAs stay legible.

```kotlin
// ui/theme/Theme.kt
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.MaterialTheme

private val PaneraLight = lightColorScheme(
    primary        = PaneraColors.Green,
    onPrimary      = PaneraColors.Canvas,
    background     = PaneraColors.Canvas,
    onBackground   = PaneraColors.TextPrimary,
    surface        = PaneraColors.Cream,
    onSurface      = PaneraColors.TextPrimary,
    surfaceVariant = PaneraColors.Oat,
    outline        = PaneraColors.Divider,
    error          = PaneraColors.Error,
)

private val PaneraDark = darkColorScheme(
    primary        = PaneraColors.GreenBright, // brightened so CTA reads on #14140F
    onPrimary      = PaneraColors.DarkCanvas,
    background     = PaneraColors.DarkCanvas,
    onBackground   = PaneraColors.DarkTextPrimary,
    surface        = PaneraColors.DarkSurface1,
    onSurface      = PaneraColors.DarkTextPrimary,
    surfaceVariant = PaneraColors.DarkSurface2,
    outline        = PaneraColors.DarkDivider,
    error          = PaneraColors.ErrorDark,
)

@Composable
fun PaneraTheme(
    dark: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit,
) = MaterialTheme(
    colorScheme = if (dark) PaneraDark else PaneraLight,
    typography = PaneraTypography,
    content = content,
)
```

## 2. Typography (M3)

Panera pairs a warm geometric display sans (**Poppins**, the closest free analog to its marketing face) with a neutral body sans (**Inter**) — both SIL OFL; drop the TTFs in `res/font/`. Display carries titles/names/prices/reward headlines; body carries descriptions and metadata.

```kotlin
// ui/theme/PaneraType.kt
import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

val Poppins = FontFamily(
    Font(R.font.poppins_semibold,  FontWeight.SemiBold),
    Font(R.font.poppins_bold,      FontWeight.Bold),
    Font(R.font.poppins_extrabold, FontWeight.ExtraBold),
)
val Inter = FontFamily(
    Font(R.font.inter_regular,  FontWeight.Normal),
    Font(R.font.inter_medium,   FontWeight.Medium),
    Font(R.font.inter_semibold, FontWeight.SemiBold),
)

// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
object PaneraText {
    val ScreenTitle = TextStyle(Poppins, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 38.sp, letterSpacing = (-0.5).sp)
    val Hero        = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 26.sp, lineHeight = 33.sp, letterSpacing = (-0.3).sp)
    val Section     = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 22.sp, lineHeight = 29.sp, letterSpacing = (-0.2).sp)
    val CardTitle   = TextStyle(Poppins, fontWeight = FontWeight.SemiBold,  fontSize = 18.sp, lineHeight = 23.sp)
    val ItemName    = TextStyle(Poppins, fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 20.sp)
    val Price       = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 14.sp, lineHeight = 18.sp)
    val RewardTag   = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 12.sp, lineHeight = 14.sp, letterSpacing = 0.4.sp)
    val Button      = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 16.sp, lineHeight = 18.sp, letterSpacing = 0.2.sp)
    val Body        = TextStyle(Inter,   fontWeight = FontWeight.Normal,    fontSize = 16.sp, lineHeight = 24.sp)
    val Meta        = TextStyle(Inter,   fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 19.sp)
    val Pill        = TextStyle(Inter,   fontWeight = FontWeight.SemiBold,  fontSize = 13.sp, lineHeight = 16.sp)
    val Tab         = TextStyle(Inter,   fontWeight = FontWeight.SemiBold,  fontSize = 10.sp, lineHeight = 11.sp, letterSpacing = 0.1.sp)
    val Caption     = TextStyle(Inter,   fontWeight = FontWeight.Medium,    fontSize = 12.sp, lineHeight = 17.sp)
}

// Map onto Material 3 slots so stock components inherit the brand
val PaneraTypography = Typography(
    headlineLarge  = PaneraText.ScreenTitle,
    headlineMedium = PaneraText.Hero,
    titleLarge     = PaneraText.Section,
    titleMedium    = PaneraText.CardTitle,
    bodyMedium     = PaneraText.Body,
    labelSmall     = PaneraText.Tab,
)
```

## 3. Signature Components

### MyPanera Rewards Card

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ChevronRight
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.unit.dp

@Composable
fun MyPaneraCard(headline: String, subtext: String, progress: Float, modifier: Modifier = Modifier) {
    Column(
        modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(18.dp))
            .background(Brush.linearGradient(listOf(PaneraColors.Green, PaneraColors.GreenBright)))
            .padding(16.dp),
    ) {
        Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
            Text("MYPANERA REWARDS",
                style = PaneraText.RewardTag.copy(letterSpacing = 0.6.sp),
                color = Color.White.copy(alpha = 0.92f))
            Spacer(Modifier.weight(1f))
            Icon(Icons.Filled.ChevronRight, null, tint = Color.White.copy(alpha = 0.9f), modifier = Modifier.size(16.dp))
        }
        Text(headline, style = PaneraText.CardTitle.copy(fontSize = 19.sp), color = Color.White, modifier = Modifier.padding(top = 8.dp))
        Text(subtext, style = PaneraText.Caption, color = Color.White.copy(alpha = 0.92f), modifier = Modifier.padding(top = 3.dp))
        Box(Modifier.fillMaxWidth().height(6.dp).padding(top = 0.dp).clip(RoundedCornerShape(3.dp))
                .background(Color.White.copy(alpha = 0.28f))) {
            Box(Modifier.fillMaxWidth(progress).fillMaxHeight().clip(RoundedCornerShape(3.dp)).background(Color.White))
        }
    }
}
```

### Menu Item Row

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.material.icons.filled.Add
import coil.compose.AsyncImage
import androidx.compose.ui.layout.ContentScale

@Composable
fun MenuItemRow(
    imageUrl: String, name: String, desc: String, price: String,
    rewardTag: String? = null, onAdd: () -> Unit, modifier: Modifier = Modifier,
) {
    Row(
        modifier.fillMaxWidth().padding(vertical = 14.dp),
        horizontalArrangement = Arrangement.spacedBy(14.dp),
    ) {
        AsyncImage(
            model = imageUrl, contentDescription = null,
            modifier = Modifier.size(92.dp).clip(RoundedCornerShape(14.dp)),
            contentScale = ContentScale.Crop,
        )
        Column(Modifier.weight(1f)) {
            Text(name, style = PaneraText.ItemName, color = PaneraColors.TextPrimary)
            Text(desc, style = PaneraText.Caption, color = PaneraColors.TextSecondary, maxLines = 2, modifier = Modifier.padding(top = 3.dp))
            if (rewardTag != null) {
                Text("★ $rewardTag", style = PaneraText.RewardTag, color = PaneraColors.Green, modifier = Modifier.padding(top = 4.dp))
            }
            Row(Modifier.fillMaxWidth().padding(top = 8.dp), verticalAlignment = Alignment.CenterVertically) {
                Text(price, style = PaneraText.Price, color = PaneraColors.TextPrimary)
                Spacer(Modifier.weight(1f))
                Box(
                    Modifier.size(30.dp).clip(RoundedCornerShape(50)).background(PaneraColors.Green).clickable { onAdd() },
                    contentAlignment = Alignment.Center,
                ) { Icon(Icons.Filled.Add, "Add to order", tint = Color.White, modifier = Modifier.size(15.dp)) }
            }
        }
    }
    HorizontalDivider(thickness = 0.5.dp, color = PaneraColors.Divider)
}
```

### Quantity Stepper

```kotlin
import androidx.compose.material.icons.filled.Remove
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback

@Composable
fun QuantityStepper(count: Int, onCount: (Int) -> Unit, modifier: Modifier = Modifier) {
    val haptics = LocalHapticFeedback.current
    Row(
        modifier
            .clip(RoundedCornerShape(50))
            .background(PaneraColors.Oat)
            .border(1.dp, PaneraColors.Divider, RoundedCornerShape(50))
            .padding(horizontal = 8.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(16.dp),
    ) {
        IconButton(onClick = { if (count > 1) { haptics.performHapticFeedback(HapticFeedbackType.LongPress); onCount(count - 1) } },
            modifier = Modifier.size(44.dp)) {
            Icon(Icons.Filled.Remove, "Decrease", tint = PaneraColors.Green)
        }
        Text("$count", style = PaneraText.ItemName, color = PaneraColors.TextPrimary)
        IconButton(onClick = { haptics.performHapticFeedback(HapticFeedbackType.LongPress); onCount(count + 1) },
            modifier = Modifier.size(44.dp)) {
            Icon(Icons.Filled.Add, "Increase", tint = PaneraColors.Green)
        }
    }
}
```

### Sticky "Add to Order" Bar

```kotlin
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Surface

@Composable
fun AddToOrderBar(priceLabel: String, onClick: () -> Unit, modifier: Modifier = Modifier) {
    val haptics = LocalHapticFeedback.current
    Surface(color = PaneraColors.Canvas, shadowElevation = 12.dp, modifier = modifier.fillMaxWidth()) {
        Button(
            onClick = { haptics.performHapticFeedback(HapticFeedbackType.LongPress); onClick() },
            shape = RoundedCornerShape(50),
            colors = ButtonDefaults.buttonColors(containerColor = PaneraColors.Green, contentColor = Color.White),
            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 10.dp).height(52.dp),
        ) {
            Text("Add to Order · $priceLabel", style = PaneraText.Button)
        }
    }
}
```

### Pickup / Delivery Toggle

```kotlin
@Composable
fun PickupDeliveryToggle(isPickup: Boolean, onChange: (Boolean) -> Unit, modifier: Modifier = Modifier) {
    Row(
        modifier.clip(RoundedCornerShape(50)).background(PaneraColors.Oat)
            .border(1.dp, PaneraColors.Divider, RoundedCornerShape(50)).padding(4.dp),
    ) {
        @Composable fun Seg(label: String, on: Boolean, tap: () -> Unit) {
            Box(
                Modifier.weight(1f).clip(RoundedCornerShape(50))
                    .background(if (on) PaneraColors.Green else Color.Transparent)
                    .clickable { tap() }.padding(vertical = 10.dp),
                contentAlignment = Alignment.Center,
            ) { Text(label, style = PaneraText.Pill, color = if (on) Color.White else PaneraColors.TextSecondary) }
        }
        Seg("Pickup", isPickup) { onChange(true) }
        Seg("Delivery", !isPickup) { onChange(false) }
    }
}
```

## 4. Navigation

Panera has minimal chrome: a 5-tab bottom bar over a food-photo-driven content area. On Android, model it as a `NavigationBar`. There is no Material tint pill — active is the brand green; in dark mode use `GreenBright` so it reads on `#14140F`.

```kotlin
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.*

@Composable
fun PaneraBottomBar(selected: Int, onSelect: (Int) -> Unit) {
    NavigationBar(containerColor = PaneraColors.Canvas, tonalElevation = 0.dp) {
        val items = listOf(
            "Home"      to Icons.Filled.Home,
            "Order"     to Icons.Filled.ShoppingBag,
            "Rewards"   to Icons.Filled.Star,
            "Favorites" to Icons.Filled.Bookmark,
            "Account"   to Icons.Filled.AccountCircle,
        )
        items.forEachIndexed { i, (label, icon) ->
            NavigationBarItem(
                selected = selected == i,
                onClick = { onSelect(i) },
                icon = { Icon(icon, label, modifier = Modifier.size(22.dp)) },
                label = { Text(label, style = PaneraText.Tab) },
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor = PaneraColors.Green,   // GreenBright in dark scheme
                    selectedTextColor = PaneraColors.Green,
                    unselectedIconColor = PaneraColors.TextTertiary,
                    unselectedTextColor = PaneraColors.TextTertiary,
                    indicatorColor = Color.Transparent, // no Material pill — Panera has none
                ),
            )
        }
    }
}
```

The cart is a `ModalBottomSheet` (rounded 24.dp top) listing line items with a thumbnail, name, `QuantityStepper`, and price; a Subtotal / Rewards-applied / Total stack; and a pinned full-width green "Checkout" button. Applied-reward rows tint `GreenTint` with a green checkmark.

## 5. Motion

Panera motion is gentle and appetizing — soft 180–600ms ease-out, never harsh.

| Moment | Compose recipe |
|--------|----------------|
| Add to Order | button `scale` 1 → 0.98 on press `tween(120)`; cart badge `animateIntAsState`; soft haptic |
| Rewards progress fill | `animateFloatAsState(progress, tween(600, easing = FastOutSlowInEasing))` width fraction |
| Category underline | `animateDpAsState` x-offset `tween(200)`; list `Crossfade` |
| Item detail open | shared element via `LookaheadScope` / Nav3 transition `tween(300)` |
| Cart sheet | `ModalBottomSheet` default slide; backdrop scrim auto |
| Pickup/Delivery toggle | selected fill `animateColorAsState` + position `tween(180)` |
| Pull to refresh | `PullToRefreshBox` with a Panera-mark indicator |

```kotlin
// Rewards progress — the canonical Panera loyalty motion
val animated by animateFloatAsState(
    targetValue = progress,
    animationSpec = tween(600, easing = FastOutSlowInEasing),
    label = "rewardProgress",
)
Box(Modifier.fillMaxWidth(animated).fillMaxHeight().background(Color.White))
```

Haptics: prefer `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for the soft impact on Add to Order, stepper tap, and toggle switch. For the "reward unlocked" celebration use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CONFIRM)`. Auto-saved cart edits are silent; only show a snackbar on error.

## 6. Icons

The closest first-party set is `androidx.compose.material:material-icons-extended`.

| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
|---------|-----------------|--------------------------|
| Home (tab) | `house.fill` | `Icons.Filled.Home` |
| Order (tab) | `bag.fill` | `Icons.Filled.ShoppingBag` |
| Rewards (tab) | `star.circle.fill` | `Icons.Filled.Star` |
| Favorites (tab) | `bookmark.fill` | `Icons.Filled.Bookmark` |
| Account (tab) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
| Add to order | `plus` | `Icons.Filled.Add` |
| Stepper minus / plus | `minus` / `plus` | `Icons.Filled.Remove` / `Icons.Filled.Add` |
| Back | `chevron.left` | `Icons.Filled.ArrowBack` |
| Favorite (heart) | `heart` / `heart.fill` | `Icons.Outlined.FavoriteBorder` / `Icons.Filled.Favorite` |
| Share | `square.and.arrow.up` | `Icons.Filled.Share` |
| Reward star | `star.fill` | `Icons.Filled.Star` |
| Sip Club | `cup.and.saucer.fill` | `Icons.Filled.LocalCafe` |
| Pickup / location | `mappin.and.ellipse` | `Icons.Filled.Place` |
| Delivery | `bicycle` | `Icons.Filled.DeliveryDining` |
| Calories / info | `flame.fill` | `Icons.Filled.LocalFireDepartment` |
| Search | `magnifyingglass` | `Icons.Filled.Search` |

## 7. Minimum SDK & Accessibility Notes

- **minSdk 24** (Compose floor is 21; modern motion is comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
- **Edge-to-edge**: call `enableEdgeToEdge()`; the warm cream canvas wants dark-content system bars (light-content in dark mode). The full-bleed item-detail hero photo wants light-content status icons with a top scrim; the sticky "Add to Order" bar must sit above the navigation bar inset (`Modifier.navigationBarsPadding()`).
- **Font scaling**: `sp` honors the user's font scale — keep it on screen titles, item names, descriptions, prices, calorie counts. Pin layout-sensitive text (10sp tab labels, reward tags, filter chips, stepper glyphs) by deriving from `dp` or a fixed-`fontScale` density.
- **TalkBack**: label menu rows "{name}, {price}, {calories}, double-tap to view; actions: Add to order"; expose the add `+` as a separate action; the rewards card announces "MyPanera, {headline}, {percent} percent to next reward".
- **Touch targets**: Material guidance is 48.dp. The 30.dp add-button and 14.dp stepper glyphs get 44–48.dp hit areas via `Modifier.size`; menu rows are full-row tappable (≥ 100.dp); the primary button is 52.dp.
- **Contrast**: `#2A2A1F` on `#FFFFFF` and on `#F4EFE1` passes WCAG AA for body at 16sp; white text on `#4C8B2B` passes AA. In dark mode use `#6BBE45` for actions so contrast holds on `#14140F`.
- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable the Add-to-Order scale-bounce and the rewards-progress sweep — substitute an instant value set; keep the cart badge count change.
- **Dark mode**: invert via the `Dark*` palette — `#14140F`, NOT true black or cold gray; `#2A2A1F` text becomes `#F3EFE4`; the action color becomes `GreenBright`. Do **not** enable Material You `dynamicColorScheme()` — Panera's bakery-warm-and-green identity must hold regardless of wallpaper (the single green action color is the brand).