Тулбар ChatDetail по Figma: capsule back-кнопка, аватар 44×44, padding и размеры

docs/blur-materials.md

@@ -0,0 +1,92 @@
+# iOS Blur Materials Reference (from Figma)
+
+All materials use `backdrop-blur: 50px` (equivalent to `UIBlurEffect` system radius).
+
+---
+
+## Dark Mode Materials
+
+### Ultrathin — Dark
+Most transparent. Use for subtle overlays, nav bar pills.
+
+| Layer | Property |
+|-------|----------|
+| Base fill | `rgba(255, 255, 255, 0.07)` |
+| Blur layer | `backdrop-blur: 50px`, `rgba(255, 255, 255, 0.03)`, blend: `color-dodge` |
+
+SwiftUI equivalent: `.ultraThinMaterial` (note: adds slight grey chromatic tint on pure black)
+
+### Thin — Dark
+Slight blur. Use for search bars, secondary panels.
+
+| Layer | Property |
+|-------|----------|
+| Base fill | `rgba(255, 255, 255, 0.05)` |
+| Blur layer | `backdrop-blur: 50px`, `rgba(255, 255, 255, 0.40)`, blend: `color-dodge` |
+
+SwiftUI equivalent: `.thinMaterial`
+
+### Regular (Default) — Dark
+Medium blur. Use for tab bars, cards, input bars.
+
+| Layer | Property |
+|-------|----------|
+| Base fill | `rgba(255, 255, 255, 0.25)`, blend: `plus-lighter` |
+| Blur layer | `backdrop-blur: 50px`, `rgba(255, 255, 255, 0.60)`, blend: `color-dodge` |
+
+SwiftUI equivalent: `.regularMaterial`
+
+### Thick — Dark
+Heavy, opaque blur. Use for modal overlays, sheets.
+
+| Layer | Property |
+|-------|----------|
+| Fill | `rgba(0, 0, 0, 0.60)` |
+| Blur | `backdrop-blur: 50px` |
+
+SwiftUI equivalent: `.thickMaterial`
+
+---
+
+## Dark Mode Vibrant Colors (on material backgrounds)
+
+### Labels (text over material)
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Vibrant Primary | `#FFFFFF` | Main text |
+| Vibrant Secondary | `#999999` | Subtitle, caption |
+| Vibrant Tertiary | `#404040` | Hint, placeholder |
+| Vibrant Quaternary | `#262626` | Disabled text |
+
+### Fills (elements over material)
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Vibrant Primary | `#333333` | Main fill |
+| Vibrant Secondary | `#121212` | Secondary fill |
+| Vibrant Tertiary | `#121212` | Tertiary fill |
+
+### Separator
+| Token | Hex |
+|-------|-----|
+| Separator | `#1A1A1A` |
+
+---
+
+## Dark Theme — Practical Gotchas
+
+1. **`.thinMaterial` / `.ultraThinMaterial` look grey on dark backgrounds** — they add a light chromatic tint. For elements on pure black, use `Color.white.opacity(0.08)` or the Figma "Ultrathin" recipe: `rgba(255,255,255,0.07)` base fill.
+
+2. **Telegram-style dark fades** are `LinearGradient` with `Color.black` opacity stops, NOT material blurs.
+
+3. **`UIVisualEffectView` cannot blur SwiftUI content** — different rendering layers.
+
+---
+
+## iOS Version Mapping
+
+| Figma Material | iOS < 26 (SwiftUI) | iOS 26+ |
+|----------------|---------------------|---------|
+| Ultrathin | `.ultraThinMaterial` or `Color.white.opacity(0.07)` | `.glassEffect(.ultraThin)` |
+| Thin | `.thinMaterial` or `Color.white.opacity(0.05)` | `.glassEffect(.thin)` |
+| Regular | `.regularMaterial` | `.glassEffect(.regular)` |
+| Thick | `.thickMaterial` or `Color.black.opacity(0.6)` | `.glassEffect(.thick)` |