The food-app run on warm-light theme shipped a bottom-tab-bar with a valid \$color-surface (white) fill, but the page bg (\$color-bg-deep) is cream #FFF8F0. The luminance delta between white and cream is ~0.03 — visually indistinguishable, so the user reads the nav as having no background even though it does. Image #40 made this concrete: the nav fill landed correctly per live-doc inspection, but the screenshot still showed icons floating over an unbroken cream background. The inject pass already set the surface fill. To survive the low-fill-contrast case we also stamp a soft shadow: - bottom-tab-bar → upward shadow (offsetY: -4) lifts the nav off the content above. A downward shadow would clip off-screen. - top-app-bar / top-nav-bar / navbar → downward shadow (offsetY: 4). An upward shadow would cling to the screen edge. - nav / tab-bar / tab-row → ambiguous position, default downward. Shadow specs (offsetY: ±4, blur: 12, spread: 0, color: #0000000F) match conventional iOS/Android nav lift values and survive on ANY page bg color, not just cream — even on dark themes the extra subtle shadow is invisible (already-dark page) without breaking the design. Existing effects on the nav are preserved — sub-agents that intentionally emit a drop-shadow / glow keep their declaration. 3 new tests cover: bottom-nav gets upward shadow, top-nav variants get downward shadow, sub-agent's existing effects survive the inject pass. |
||
|---|---|---|
| .. | ||
| agent-native@e1f90cab96 | ||
| pen-acp | ||
| pen-ai-skills | ||
| pen-core | ||
| pen-engine | ||
| pen-figma | ||
| pen-mcp | ||
| pen-react | ||
| pen-renderer | ||
| pen-sdk | ||
| pen-types | ||
| CLAUDE.md | ||