designmd-forge 1.2.0

package/dist/data/designs/ios-dropbox-android.md

@@ -0,0 +1,522 @@
+# Dropbox (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Dropbox's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, `Modifier`s, 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 (Dropbox's paper-white canvas, single Dropbox-Blue accent, colored file-type rows, determinate upload bar) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `FloatingActionButton` instead of a custom iOS FAB, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for image thumbnails.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/DropboxColors.kt
+import androidx.compose.ui.graphics.Color
+
+object DropboxColors {
+    // Canvas & Surfaces (Light)
+    val Canvas   = Color(0xFFFFFFFF)
+    val Surface  = Color(0xFFF7F5F2)
+    val Divider  = Color(0xFFE6E1DA)
+
+    // Text
+    val TextPrimary   = Color(0xFF1E1919)
+    val TextSecondary = Color(0xFF6F6A65)
+    val TextTertiary  = Color(0xFFA39E98)
+
+    // Brand
+    val Blue        = Color(0xFF0061FF)
+    val BluePressed = Color(0xFF0050D0)
+    val BlueTint    = Color(0xFFE6F0FF)
+
+    // Dark
+    val DarkCanvas  = Color(0xFF1E1919)
+    val DarkSurface = Color(0xFF2A2424)
+    val DarkDivider = Color(0xFF3A3331)
+    val DarkBlue    = Color(0xFF3D8BFF)
+
+    // File-type icons
+    val PdfRed     = Color(0xFFFA551E)
+    val DocBlue    = Color(0xFF0061FF)
+    val SheetGreen = Color(0xFF1A8754)
+    val ImageTeal  = Color(0xFF00B2A9)
+    val FolderSlate = Color(0xFF8C97A8)
+
+    // Semantic
+    val Success = Color(0xFF1A8754)
+    val Warning = Color(0xFFFFAF00)
+    val Error   = Color(0xFFD1180B)
+}
+```
+
+Wire it into Material 3 light and dark schemes so ripples, dividers, and default component colors inherit the brand.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.foundation.isSystemInDarkTheme
+
+private val DropboxLight = lightColorScheme(
+    primary        = DropboxColors.Blue,
+    onPrimary      = Color.White,
+    background     = DropboxColors.Canvas,
+    onBackground   = DropboxColors.TextPrimary,
+    surface        = DropboxColors.Canvas,
+    onSurface      = DropboxColors.TextPrimary,
+    surfaceVariant = DropboxColors.Surface,
+    outline        = DropboxColors.Divider,
+    error          = DropboxColors.Error,
+)
+
+private val DropboxDark = darkColorScheme(
+    primary        = DropboxColors.DarkBlue,
+    onPrimary      = Color.White,
+    background     = DropboxColors.DarkCanvas,
+    onBackground   = Color.White,
+    surface        = DropboxColors.DarkSurface,
+    onSurface      = Color.White,
+    surfaceVariant = DropboxColors.DarkSurface,
+    outline        = DropboxColors.DarkDivider,
+    error          = DropboxColors.Error,
+)
+
+@Composable
+fun DropboxTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) DropboxDark else DropboxLight,
+    typography  = DropboxTypography,
+    content     = content,
+)
+```
+
+## 2. Typography
+
+Sharp Grotesk is Dropbox's licensed brand typeface. Drop the TTFs in `res/font/` (lowercase, snake_case) and build a `FontFamily`. The closest free substitute is **Inter** — load that if Sharp Grotesk is unavailable; otherwise fall back to the system grotesque (Roboto).
+
+```kotlin
+// ui/theme/DropboxType.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 Sharp = FontFamily(
+    Font(R.font.sharp_grotesk_regular,  FontWeight.Normal),   // 400
+    Font(R.font.sharp_grotesk_semibold, FontWeight.SemiBold), // 600
+    Font(R.font.sharp_grotesk_bold,     FontWeight.Bold),     // 700
+)
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
+object DropboxText {
+    val TitleLarge = TextStyle(Sharp, fontWeight = FontWeight.Bold,     fontSize = 28.sp, lineHeight = 32.sp, letterSpacing = (-0.4).sp)
+    val Section    = TextStyle(Sharp, fontWeight = FontWeight.Bold,     fontSize = 22.sp, lineHeight = 26.sp, letterSpacing = (-0.3).sp)
+    val SheetTitle = TextStyle(Sharp, fontWeight = FontWeight.Bold,     fontSize = 20.sp, lineHeight = 24.sp, letterSpacing = (-0.2).sp)
+    val CardTitle  = TextStyle(Sharp, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 22.sp, letterSpacing = (-0.1).sp)
+    val RowName    = TextStyle(Sharp, fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 20.sp, letterSpacing = (-0.1).sp)
+    val Body       = TextStyle(Sharp, fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 22.sp)
+    val Meta       = TextStyle(Sharp, fontWeight = FontWeight.Normal,   fontSize = 14.sp, lineHeight = 18.sp)
+    val Caption    = TextStyle(Sharp, fontWeight = FontWeight.Normal,   fontSize = 12.sp, lineHeight = 16.sp)
+    val LabelUpper = TextStyle(Sharp, fontWeight = FontWeight.Bold,     fontSize = 11.sp, lineHeight = 13.sp, letterSpacing = 0.6.sp)
+    val Button     = TextStyle(Sharp, fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 20.sp)
+    val Tab        = TextStyle(Sharp, fontWeight = FontWeight.SemiBold, fontSize = 11.sp, lineHeight = 13.sp, letterSpacing = 0.2.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val DropboxTypography = Typography(
+    headlineLarge = DropboxText.TitleLarge,
+    headlineSmall = DropboxText.Section,
+    titleMedium   = DropboxText.RowName,
+    bodyMedium    = DropboxText.Body,
+    labelSmall    = DropboxText.Tab,
+)
+```
+
+For tabular figures on file sizes/dates, apply `TextStyle(fontFeatureSettings = "tnum")` to `Meta`/`Caption` usages.
+
+## 3. Signature Components
+
+### Primary Button
+
+```kotlin
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun DropboxPrimaryButton(
+    text: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(if (pressed) 0.98f else 1f, label = "btnScale")
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .scale(scale)
+            .graphicsLayer { alpha = if (enabled) 1f else 0.4f }
+            .clip(RoundedCornerShape(8.dp))
+            .background(if (pressed) DropboxColors.BluePressed else DropboxColors.Blue)
+            .clickable(interaction, indication = null, enabled = enabled, onClick = onClick)
+            .padding(vertical = 14.dp, horizontal = 24.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(text, style = DropboxText.Button, color = Color.White)
+    }
+}
+```
+
+### Upload / Create FAB
+
+```kotlin
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material3.Icon
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+
+@Composable
+fun DropboxUploadFab(onClick: () -> Unit, modifier: Modifier = Modifier) {
+    val haptics = LocalHapticFeedback.current
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(if (pressed) 0.92f else 1f, label = "fabScale")
+
+    FloatingActionButton(
+        onClick = {
+            haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS soft impact
+            onClick()
+        },
+        modifier = modifier.size(56.dp).scale(scale),
+        shape = CircleShape,
+        containerColor = if (pressed) DropboxColors.BluePressed else DropboxColors.Blue,
+        contentColor = Color.White,
+        interactionSource = interaction,
+    ) {
+        Icon(Icons.Filled.Add, contentDescription = "Upload or create", modifier = Modifier.size(24.dp))
+    }
+}
+```
+
+### File / Folder Row
+
+```kotlin
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.style.TextOverflow
+import coil.compose.AsyncImage
+
+enum class FileKind { Pdf, Doc, Sheet, Image, Folder }
+
+@Composable
+fun DropboxFileRow(
+    name: String,
+    meta: String,
+    kind: FileKind,
+    selected: Boolean = false,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+
+    val (icon, tint) = when (kind) {
+        FileKind.Pdf    -> Icons.Filled.PictureAsPdf to DropboxColors.PdfRed
+        FileKind.Doc    -> Icons.Filled.Description   to DropboxColors.DocBlue
+        FileKind.Sheet  -> Icons.Filled.GridOn        to DropboxColors.SheetGreen
+        FileKind.Image  -> Icons.Filled.Image         to DropboxColors.ImageTeal
+        FileKind.Folder -> Icons.Filled.Folder        to DropboxColors.FolderSlate
+    }
+    val bg = when {
+        selected -> DropboxColors.BlueTint
+        pressed  -> DropboxColors.Surface
+        else     -> DropboxColors.Canvas
+    }
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(60.dp)
+            .background(bg)
+            .clickable(interaction, indication = null, onClick = onClick)
+            .padding(horizontal = 16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        if (selected) {
+            Icon(Icons.Filled.CheckCircle, contentDescription = "Selected",
+                tint = DropboxColors.Blue, modifier = Modifier.size(40.dp))
+        } else {
+            Box(
+                Modifier.size(40.dp).clip(RoundedCornerShape(8.dp))
+                    .background(tint.copy(alpha = 0.14f)),
+                contentAlignment = Alignment.Center,
+            ) {
+                Icon(icon, contentDescription = null, tint = tint, modifier = Modifier.size(20.dp))
+            }
+        }
+        Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(2.dp)) {
+            Text(name, style = DropboxText.RowName, color = DropboxColors.TextPrimary,
+                maxLines = 1, overflow = TextOverflow.Ellipsis)
+            Text(meta, style = DropboxText.Meta.copy(fontFeatureSettings = "tnum"),
+                color = DropboxColors.TextSecondary, maxLines = 1, overflow = TextOverflow.Ellipsis)
+        }
+        Icon(
+            if (kind == FileKind.Folder) Icons.Filled.ChevronRight else Icons.Filled.MoreHoriz,
+            contentDescription = if (kind == FileKind.Folder) "Open" else "More",
+            tint = DropboxColors.TextSecondary, modifier = Modifier.size(18.dp),
+        )
+    }
+}
+```
+
+### Upload Progress Bar
+
+```kotlin
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.progressSemantics
+import androidx.compose.ui.draw.drawBehind
+
+@Composable
+fun DropboxUploadBar(
+    label: String,
+    progress: Float, // 0f..1f real byte ratio
+    done: Boolean = false,
+    modifier: Modifier = Modifier,
+) {
+    val animated by animateFloatAsState(progress, tween(200), label = "uploadProgress")
+    Column(
+        modifier
+            .fillMaxWidth()
+            .background(DropboxColors.Canvas)
+            .padding(horizontal = 16.dp, vertical = 12.dp),
+        verticalArrangement = Arrangement.spacedBy(6.dp),
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Text(label, style = DropboxText.Meta.copy(fontWeight = FontWeight.SemiBold),
+                color = DropboxColors.TextPrimary, modifier = Modifier.weight(1f))
+            if (done) Icon(Icons.Filled.CheckCircle, "Done", tint = DropboxColors.Success,
+                modifier = Modifier.size(18.dp))
+        }
+        Box(
+            Modifier
+                .fillMaxWidth().height(3.dp)
+                .clip(RoundedCornerShape(2.dp))
+                .background(DropboxColors.Divider)
+                .progressSemantics(animated)
+                .drawBehind {
+                    drawRect(
+                        color = DropboxColors.Blue,
+                        size = size.copy(width = size.width * animated),
+                    )
+                }
+        )
+    }
+}
+```
+
+### Recent File Card
+
+```kotlin
+@Composable
+fun DropboxRecentCard(
+    name: String,
+    meta: String,
+    thumbUrl: String?,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier
+            .size(width = 140.dp, height = 160.dp)
+            .clip(RoundedCornerShape(12.dp))
+            .border(1.dp, DropboxColors.Divider, RoundedCornerShape(12.dp))
+            .background(DropboxColors.Canvas)
+            .padding(12.dp),
+    ) {
+        Box(
+            Modifier.fillMaxWidth().height(96.dp).clip(RoundedCornerShape(4.dp))
+                .background(DropboxColors.Surface),
+            contentAlignment = Alignment.Center,
+        ) {
+            if (thumbUrl != null) {
+                AsyncImage(thumbUrl, null, Modifier.fillMaxSize())
+            } else {
+                Icon(Icons.Filled.Description, null, tint = DropboxColors.Blue,
+                    modifier = Modifier.size(28.dp))
+            }
+        }
+        Spacer(Modifier.height(8.dp))
+        Text(name, style = DropboxText.CardTitle, color = DropboxColors.TextPrimary,
+            maxLines = 2, overflow = TextOverflow.Ellipsis)
+        Text(meta, style = DropboxText.Caption.copy(fontFeatureSettings = "tnum"),
+            color = DropboxColors.TextSecondary)
+    }
+}
+```
+
+## 4. Photo Grid (contact-sheet)
+
+```kotlin
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+
+@Composable
+fun DropboxPhotoGrid(urls: List<String>) {
+    var selected by remember { mutableStateOf(setOf<Int>()) }
+    LazyVerticalGrid(
+        columns = GridCells.Fixed(3),
+        horizontalArrangement = Arrangement.spacedBy(2.dp),
+        verticalArrangement = Arrangement.spacedBy(2.dp),
+    ) {
+        itemsIndexed(urls) { i, url ->
+            Box(
+                Modifier
+                    .aspectRatio(1f)
+                    .combinedClickable(
+                        onClick = {},
+                        onLongClick = {
+                            selected = if (i in selected) selected - i else selected + i
+                        },
+                    ),
+            ) {
+                AsyncImage(url, null, Modifier.fillMaxSize(), contentScale = ContentScale.Crop)
+                if (i in selected) {
+                    Box(Modifier.matchParentSize().border(4.dp, DropboxColors.Blue))
+                    Icon(Icons.Filled.CheckCircle, "Selected", tint = DropboxColors.Blue,
+                        modifier = Modifier.align(Alignment.TopEnd).padding(6.dp).size(20.dp))
+                }
+            }
+        }
+    }
+}
+```
+
+## 5. Bottom Navigation (Tab Bar)
+
+Use Material 3 `NavigationBar`. Dropbox's iOS tab bar is `.regularMaterial` blur; Android has no first-class live blur, so use a 94%-opaque canvas surface. **Active tint is Dropbox Blue.**
+
+```kotlin
+@Composable
+fun DropboxBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(
+        containerColor = DropboxColors.Canvas.copy(alpha = 0.94f),
+        tonalElevation = 0.dp,
+    ) {
+        val items = listOf(
+            "Home"    to Icons.Filled.Home,
+            "Files"   to Icons.Filled.Folder,
+            "Photos"  to Icons.Filled.PhotoLibrary,
+            "Offline" to Icons.Filled.CloudDownload,
+            "Account" to Icons.Filled.AccountCircle,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(24.dp)) },
+                label = { Text(label, style = DropboxText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = DropboxColors.Blue,
+                    selectedTextColor   = DropboxColors.Blue,
+                    unselectedIconColor = DropboxColors.TextSecondary,
+                    unselectedTextColor = DropboxColors.TextSecondary,
+                    indicatorColor      = DropboxColors.BlueTint,
+                ),
+            )
+        }
+    }
+}
+```
+
+Anchor `DropboxUploadFab` in the `Scaffold` `floatingActionButton` slot with `FabPosition.End` so it floats bottom-right above the bar.
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| FAB tap | `animateFloatAsState` 1 → 0.92 spring; `HapticFeedbackType.LongPress` (~iOS soft impact) |
+| Primary button press | `animateFloatAsState` 1 → 0.98 |
+| Upload progress | `animateFloatAsState(progress, tween(200))` — driven by real byte ratio, no shimmer |
+| Star toggle | `Animatable` keyframes 1 → 1.12 → 1 over 240ms; `HapticFeedbackType.LongPress`; tint flips to Blue |
+| Thumbnail decode | Coil `crossfade(200)` fade-in as tiles load |
+| Sheet present | `ModalBottomSheet` default spring; scrim `Color(0xFF1E1919).copy(alpha = 0.40f)` |
+
+```kotlin
+// Star toggle bounce
+@Composable
+fun StarToggle(starred: Boolean, onToggle: () -> Unit) {
+    val scale = remember { Animatable(1f) }
+    LaunchedEffect(starred) {
+        if (starred) {
+            scale.animateTo(1.12f, tween(120)); scale.animateTo(1f, tween(120))
+        }
+    }
+    val haptics = LocalHapticFeedback.current
+    Icon(
+        if (starred) Icons.Filled.Star else Icons.Outlined.StarBorder,
+        contentDescription = "Star",
+        tint = if (starred) DropboxColors.Blue else DropboxColors.TextSecondary,
+        modifier = Modifier.size(22.dp).scale(scale.value).clickable {
+            haptics.performHapticFeedback(HapticFeedbackType.LongPress); onToggle()
+        },
+    )
+}
+```
+
+Haptics: prefer `LocalHapticFeedback`. For richer control use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CONTEXT_CLICK)` (API 30+) or a `Vibrator` `VibrationEffect.createOneShot(10, ...)` to approximate iOS's `.soft` impact.
+
+## 7. Icons
+
+Closest first-party set is `androidx.compose.material:material-icons-extended`. For exact parity, export Dropbox's glyphs as vector drawables and load via `ImageVector.vectorResource(R.drawable.…)`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Upload / Create | `plus` | `Icons.Filled.Add` |
+| PDF file | `doc.richtext.fill` | `Icons.Filled.PictureAsPdf` |
+| Doc file | `doc.text.fill` | `Icons.Filled.Description` |
+| Sheet file | `tablecells.fill` | `Icons.Filled.GridOn` |
+| Image file | `photo.fill` | `Icons.Filled.Image` |
+| Folder | `folder.fill` | `Icons.Filled.Folder` |
+| Selected | `checkmark.circle.fill` | `Icons.Filled.CheckCircle` |
+| More | `ellipsis` | `Icons.Filled.MoreHoriz` |
+| Folder chevron | `chevron.right` | `Icons.Filled.ChevronRight` |
+| Star | `star` / `star.fill` | `Icons.Outlined.StarBorder` / `Icons.Filled.Star` |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| Download / Offline | `arrow.down.circle` | `Icons.Filled.CloudDownload` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Home (tab) | `house` | `Icons.Filled.Home` |
+| Files (tab) | `folder` | `Icons.Filled.Folder` |
+| Photos (tab) | `photo.on.rectangle` | `Icons.Filled.PhotoLibrary` |
+| Account (tab) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; modern motion + Coil are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()` in the `Activity`; the light canvas wants dark system-bar icons via `WindowCompat`. Use `Scaffold` insets so the FAB clears the gesture nav and the upload bar clears the bottom bar.
+- **Font scaling**: `sp` honors the user's font scale automatically — keep it on file names, metadata, body. Pin layout-sensitive text (tab labels, the 3.dp progress bar, the 56.dp FAB glyph) via `dp` or a fixed `Density` override.
+- **Tabular numerals**: apply `fontFeatureSettings = "tnum"` to `Meta`/`Caption` so file sizes and dates align in columns.
+- **TalkBack**: set `contentDescription` on the FAB (`"Upload or create"`); merge file-row name + metadata with `Modifier.semantics(mergeDescendants = true)` and mark the trailing overflow/chevron as a separate button. Add `progressSemantics()` to the upload bar.
+- **Touch targets**: Material guidance is 48.dp minimum. The 56.dp FAB and 60.dp rows are clear; give the 18.dp ellipsis a 48.dp hit area via padding.
+- **Contrast**: `#6F6A65` on `#FFFFFF` passes WCAG AA at 14sp+. On the dark canvas use `DarkBlue #3D8BFF` for blue text/icons over `#1E1919`. Validate 11sp tab/label text and bump toward `#5A554F` if targeting strict compliance.
+- **Dynamic color**: do **not** enable Material You `dynamicLightColorScheme()` — Dropbox's brand requires the fixed paper-white canvas and single Dropbox-Blue accent regardless of wallpaper.