feat: theme the app like the web (tokens, fonts, Lucide, UI kit) #2

Merged

eliott merged 4 commits from feat/theme into main

2026-10-15 21:22:54 +02:00

eliott commented

2026-10-15 21:11:03 +02:00

Owner

Brings the web app's look to the native app, ahead of sub-project 4 (shoots and frames).

What changes

Brand: frame-note app icon, adaptive icon layers and splash, app name lowercase rollnote.
Theme tokens: a global stylesheet (src/styles/global-styles.ts) with the web palette from themePreset.ts - stone neutrals, ember primary, oxide danger, olive success - plus radii, spacing and type sizes. Dark mode follows the system through prefers-color-scheme. tokens.ts repeats the colours for native props and a test keeps both equal.
Fonts: DM Sans (body) and Bricolage Grotesque (display), OFL TTFs in assets/fonts, loaded behind the splash screen.
Icons: Lucide through @ng-native/icons + @ng-icons/lucide + react-native-svg; tab bar icons are Lucide glyphs rendered to template PNGs.
UI kit (src/lib/components/ui): app-screen (safe area, keyboard avoidance), app-button, app-text-field, app-card, app-message, app-list-group / app-list-row, app-icon, with tests.
Screens: login and two-factor follow the web sign-in layout and copy; Account is a grouped list; Debug gets a themed header; placeholder tabs and the sync indicator use the kit; tab bar and headers take the theme colours (Android tab appearance passed with processed colours).
CLAUDE.md documents the styling rules. Version 0.3.0.

Needs a native rebuild

New native modules (react-native-svg, expo-font, expo-splash-screen): run pnpm android once.

Verified

pnpm test (170), typecheck, lint, format:check.
On the emulator against the sync-support API: login, 2FA, tabs, Account, Debug in light and dark; keyboard avoidance and label-to-field focus.

Brings the web app's look to the native app, ahead of sub-project 4 (shoots and frames). ## What changes - **Brand**: frame-note app icon, adaptive icon layers and splash, app name lowercase `rollnote`. - **Theme tokens**: a global stylesheet (`src/styles/global-styles.ts`) with the web palette from `themePreset.ts` - stone neutrals, ember primary, oxide danger, olive success - plus radii, spacing and type sizes. Dark mode follows the system through `prefers-color-scheme`. `tokens.ts` repeats the colours for native props and a test keeps both equal. - **Fonts**: DM Sans (body) and Bricolage Grotesque (display), OFL TTFs in `assets/fonts`, loaded behind the splash screen. - **Icons**: Lucide through `@ng-native/icons` + `@ng-icons/lucide` + `react-native-svg`; tab bar icons are Lucide glyphs rendered to template PNGs. - **UI kit** (`src/lib/components/ui`): `app-screen` (safe area, keyboard avoidance), `app-button`, `app-text-field`, `app-card`, `app-message`, `app-list-group` / `app-list-row`, `app-icon`, with tests. - **Screens**: login and two-factor follow the web sign-in layout and copy; Account is a grouped list; Debug gets a themed header; placeholder tabs and the sync indicator use the kit; tab bar and headers take the theme colours (Android tab appearance passed with processed colours). - `CLAUDE.md` documents the styling rules. Version 0.3.0. ## Needs a native rebuild New native modules (`react-native-svg`, `expo-font`, `expo-splash-screen`): run `pnpm android` once. ## Verified - `pnpm test` (170), `typecheck`, `lint`, `format:check`. - On the emulator against the sync-support API: login, 2FA, tabs, Account, Debug in light and dark; keyboard avoidance and label-to-field focus.

eliott added the

run-ci

label

2026-10-15 21:11:03 +02:00

eliott added 4 commits

2026-10-15 21:11:03 +02:00

feat(brand): frame-note app icon and adaptive icon layers 5c4df68922

Replace the Expo template icons with the rollnote frame-note mark (icon,
splash, Android adaptive foreground/background/monochrome), set the adaptive
background to #1C1917 and the app name to lowercase "rollnote".

feat(theme): web palette, fonts and splash screen 6e6dddbcbf

Bring the web app's theme to the native app. A global stylesheet passed to
mount() holds the stone/ember/oxide/olive tokens from themePreset.ts, with
the dark scheme under prefers-color-scheme, plus DM Sans and Bricolage
Grotesque (OFL TTFs) and the shared text classes. tokens.ts repeats the
colours for native props (tab bar, headers, placeholders) and a test keeps
both in step. Fonts load behind the splash screen, which now uses the brand
mark on the theme background. Tests render with the same global sheet.

feat(ui): shared components and Lucide icons 6316c58875

Add the building blocks screens are made of, styled only with the theme
tokens: app-screen (safe area, padding, keyboard avoidance), app-button
(primary, secondary, ghost, danger, loading), app-text-field (labelled
Signal Forms field with focus and error states), app-card, app-message,
app-list-group/app-list-row and app-icon over @ng-native/icons with the
Lucide set the web app uses.

feat(ui): restyle auth, shell and account on the theme

tests / test (pull_request) Successful in 1m25s

Details

e38a8dfac4

Login and two-factor follow the web sign-in layout and copy. The tab bar
gets Lucide icons and the theme colours (Android appearance passed with
processed colours), stack headers the theme through withHeaderDefaults,
and Debug a header that does not repeat the status bar inset. Account is a
grouped list, the placeholder tabs and the sync indicator use the shared
components. Document the styling rules. Bump to 0.3.0.

eliott merged commit 88098df70f into main

2026-10-15 21:22:54 +02:00

eliott deleted branch feat/theme

2026-10-15 21:22:54 +02:00

eliott referenced this pull request from a commit

2026-10-15 21:22:54 +02:00

Merge pull request 'feat: theme the app like the web (tokens, fonts, Lucide, UI kit)' (#2) from feat/theme into main