Restyle app to kBenestad design language

Replaces the ad-hoc CSS and DOM structure with the full kBenestad
forms design language from dev/mockups/kbenestad-forms.css and the
dev/mockups/reimburse.html reference mockup. Surface-only change —
all PDF engine, state, validation, and persistence logic is intact.

Key changes:
- Schibsted Grotesk + JetBrains Mono (bunny.net, system fallback)
- Semantic CSS tokens with light/dark auto + manual override
- Toolbar: font-size A−/A/A+, theme Auto/Light/Dark, about button
- Document header: logo tile + org name left, title + date right
- kb-card sections for claimant and expenses
- kb-block item containers; kb-line line rows with kb-field/kb-label
- kb-btn variants (primary, ghost, soft, dashed, danger)
- kb-note for validation errors and modal feedback
- kb-totals grand total panel (mono tabular figures)
- kb-footer with kBenestad attribution
- Favicons from dev/design_assets/favicons/

https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
This commit is contained in:
Claude 2026-06-08 03:17:02 +00:00
parent be4b4c463e
commit 2482cf544f
No known key found for this signature in database
4 changed files with 661 additions and 398 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
app/assets/favicon-32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 893 B

6
app/assets/favicon.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="reimburse">
<rect width="48" height="48" rx="12" fill="#2f6fed"></rect>
<rect x="7.5" y="14" width="33" height="20" rx="3.2" fill="none" stroke="#fff" stroke-width="2.8"></rect>
<circle cx="24" cy="24" r="4.6" fill="none" stroke="#fff" stroke-width="2.6"></circle>
<path d="M12.7 21.4 V26.6 M35.3 21.4 V26.6" stroke="#fff" stroke-width="2.6" stroke-linecap="round"></path>
</svg>

After

Width:  |  Height:  |  Size: 493 B

File diff suppressed because it is too large Load diff