feat(navigation-bar): circle buttons from tokens, 74pt bar

[ross-dash]

Issue being fixed or feature implemented

Updates NavigationBar to the current design (Design system – iOS → Navigation bar, Figma nodes 1839:112 base and 1839:254 elements). The back/close/plus buttons were single PNGs with the circle baked in, so the ring couldn't follow the light/dark toolbar/RoundBorder / toolbar/RoundContent variables, and the bar was 64pt instead of 74pt.

What was done?

• Circle buttons: .back, .close and .plus now draw a 34pt circle with a 1.5pt Color.dash.toolbarRoundBorder stroke, with the glyph centred inside and tinted Color.dash.toolbarRoundContent. Both tokens already existed with light/dark values.
• Assets: the four nav imagesets (navigationbar-back/close/plus/info) are now the design system's SVGs (preserved vectors) instead of @1x/@2x/@3x PNGs. The glyphs use template rendering, and info keeps its own colours.
• Bar height: min height goes from 64pt to 74pt. This also applies to the BottomSheet header, which uses NavigationBar.
• Touch area: each button is 44pt tall and hugs the element's width (34pt for circles, 24pt for info), matching the design's LeadingTouchArea. It was 44×44, which put the circle 5pt in from the bar's 20pt edge padding.
• Sheet title: BottomSheet's header title uses .subheadMedium (15pt Medium, 20pt line height) to match the design's nav label. It used .calloutMedium (16pt Semibold).
• Docs: docs/navigation-and-containers.md is updated, and so is a doc comment in BottomSheet that referred to the 64pt height.

How Has This Been Tested?

• xcodebuild -scheme DashUIKit for the iOS Simulator (Xcode 27).
• Checked against the Figma frames in the dashwallet-ios dashpay app, on an iPhone 18 Pro simulator (iOS 27) with this branch overriding the package: the Home and Send screens, the transaction filter sheet and the block-explorer sheet, in light mode. Dark-mode colours come from the existing tokens.
• #Previews in NavigationBar.swift and BottomSheet.swift.

Breaking Changes

No API changes: NavigationBar, NavigationBarElement.icon and .button(action:) keep their signatures.
Visual and layout changes for consumers:

• The bar and the sheet header are 10pt taller.
• Nav buttons' horizontal tap area is now the element's width (34pt) instead of 44pt.
• The sheet title is 15pt Medium.

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added or updated relevant unit/integration/functional/e2e tests
• I have made corresponding changes to the documentation

🤖 Generated with Claude Code

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: Repository: dashpay/DashUIKit/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: 72117749-590d-4086-bf59-97366b787e8b

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[romchornyi]

Looks good. Approving.

I checked:

• The branch builds for the iOS Simulator in Debug, previews included. CI here only checks the PR title, so I built it locally.
• Nothing needs more than iOS 14: Circle().strokeBorder, .overlay and a @ViewBuilder switch are all fine there.
• dashwallet-ios develop uses NavigationBarElement only through .button(action:) and never touches .icon directly. Dropping resizable() from .icon therefore doesn't affect the app.

Non-blocking notes:

1. Tap target. The buttons go from 44×44 to 34×44, which is narrower than the 44pt HIG minimum. If this matches the design's LeadingTouchArea on purpose, fine. It's worth confirming with design.
2. Height change. The bar and the BottomSheet header grow by 10pt on every screen, and self-sizing sheets grow with them. When we bump DashUIKit in the app, a quick pass over the sheets in dark mode would be good, since only light mode was checked here.
3. RTL. navigationbar-back isn't mirrored for right-to-left languages. That was already the case before this PR, so it's not a regression. It could be a follow-up.