system design implementation

[OumB2021]

Summary by CodeRabbit

• New Features
  • Added a refreshed in-app theme system with shared tokens for colors, spacing, radii, and typography.
  • Introduced reusable UI styles (typography scale, divider, badge variants) with light/dark theming.
  • Improved app startup by loading the Inter font and coordinating the splash screen until fonts are ready.
• Chores
  • Updated styling/tooling configuration and enabled CSS type-checking; added editor file ignores.
• Documentation
  • Updated project documentation content and removed a previously documented section heading.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds shared mobile theme tokens, updates Tailwind and global CSS to use semantic colors and component classes, and changes RootLayout to load Inter fonts before rendering. It also removes several obsolete mobile config and documentation files and adds a new ignore rule.

Changes

Mobile Theme and Startup Wiring

Layer / File(s)	Summary
Theme token definitions apps/mobile/theme/tokens.js, apps/mobile/theme/colors.ts, apps/mobile/theme/spacing.ts, apps/mobile/theme/radii.ts, apps/mobile/theme/typography.ts, apps/mobile/theme/index.ts	Shared color, spacing, radius, and typography token modules are added or re-exported from one theme entrypoint.
Tailwind config and global CSS apps/mobile/tailwind.config.js, apps/mobile/global.css, apps/mobile/nativewind-env.d.ts, apps/mobile/global 2.css	Tailwind content, dark mode, semantic theme extensions, and base-variable injection are added together with new global typography, divider, and badge component classes; CSS module typing is enabled, and the old Tailwind layer directives are removed.
Inter font loading and splash screen gating apps/mobile/package.json, apps/mobile/app/_layout.tsx	The Inter font dependency is added, and RootLayout now loads Inter fonts, controls the splash screen lifecycle, and returns null until fonts are ready or fail.
Ignored files and removed mobile config apps/mobile/.gitignore, README 2.md, apps/mobile/.claude/settings 2.json, apps/mobile/AGENTS 2.md, apps/mobile/babel.config 2.js, apps/mobile/metro.config 2.js, apps/mobile/nativewind-env.d 2.ts, apps/mobile/tailwind.config 2.js	A new *.pen ignore rule is added, and several previous mobile config and documentation contents are removed.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• OumB2021/Journal#1: Modifies the same apps/mobile/app/_layout.tsx RootLayout component that this PR extends with font loading and splash-screen gating.

Poem

🐇 Hop, hop—new tokens bloom,
Inter fonts chase away the gloom.
Badges gleam and dividers shine,
The journal page feels neat and fine.
Splash screen waits, then slips away,
While bunny themes greet the day.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title is too generic and doesn’t clearly describe the main change, which appears to be a mobile design-system and app setup overhaul.	Rename it to a concise summary of the primary change, such as "Add mobile design tokens and Tailwind/font setup".

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch system_design

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/mobile/global.css`:
- Around line 5-131: The token values in global.css are duplicated alongside
apps/mobile/theme/*.ts and apps/mobile/tailwind.config.js, so the runtime theme
can drift from the shared theme source. Update the CSS variable definitions in
the :root and prefers-color-scheme: dark blocks to derive from the same token
artifact used by colors.ts, radii.ts, and typography.ts, and adjust the Tailwind
config to consume that shared source instead of hardcoding parallel values. Use
the existing theme symbol names to keep one source of truth and remove the
duplicated manual mappings.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b83469e2-993a-40a5-92cb-b2d30ab25ba4

📥 Commits

Reviewing files that changed from the base of the PR and between cb5fa70 and e401e00.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (13)

• README 2.md
• apps/mobile/.claude/settings 2.json
• apps/mobile/.gitignore
• apps/mobile/app/_layout.tsx
• apps/mobile/global.css
• apps/mobile/nativewind-env.d.ts
• apps/mobile/package.json
• apps/mobile/tailwind.config.js
• apps/mobile/theme/colors.ts
• apps/mobile/theme/index.ts
• apps/mobile/theme/radii.ts
• apps/mobile/theme/spacing.ts
• apps/mobile/theme/typography.ts

💤 Files with no reviewable changes (2)

• README 2.md
• apps/mobile/.claude/settings 2.json

[coderabbitai]

🧹 Nitpick comments (1)

apps/mobile/theme/radii.ts (1)

1-3: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Convert apps/mobile/theme/tokens.js to TypeScript or add declarations
apps/mobile/theme/radii.ts still re-exports an untyped JS module, so the token exports won’t carry real types in the strict mobile app. Add a .ts source or explicit .d.ts/JSDoc for tokens.js so radii (and the other token wrappers) stay type-safe.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/mobile/theme/radii.ts` around lines 1 - 3, The theme token re-export in
radii currently points to an untyped JS source, so the mobile app loses type
safety for radii and related token wrappers. Update the tokens module to
TypeScript, or add a matching declaration file/JSDoc so the exported symbols
from tokens are properly typed and the radii re-export inherits those types.
Keep the fix centered on the tokens source and any wrapper files that import
from it.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/mobile/theme/radii.ts`:
- Around line 1-3: The theme token re-export in radii currently points to an
untyped JS source, so the mobile app loses type safety for radii and related
token wrappers. Update the tokens module to TypeScript, or add a matching
declaration file/JSDoc so the exported symbols from tokens are properly typed
and the radii re-export inherits those types. Keep the fix centered on the
tokens source and any wrapper files that import from it.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c13088c5-d6dd-425e-b40d-0b5d0821c8fa

📥 Commits

Reviewing files that changed from the base of the PR and between e401e00 and 3c02adc.

📒 Files selected for processing (12)

• apps/mobile/AGENTS 2.md
• apps/mobile/babel.config 2.js
• apps/mobile/global 2.css
• apps/mobile/global.css
• apps/mobile/metro.config 2.js
• apps/mobile/nativewind-env.d 2.ts
• apps/mobile/tailwind.config 2.js
• apps/mobile/tailwind.config.js
• apps/mobile/theme/colors.ts
• apps/mobile/theme/radii.ts
• apps/mobile/theme/spacing.ts
• apps/mobile/theme/tokens.js

💤 Files with no reviewable changes (7)

• apps/mobile/AGENTS 2.md
• apps/mobile/nativewind-env.d 2.ts
• apps/mobile/tailwind.config 2.js
• apps/mobile/metro.config 2.js
• apps/mobile/global 2.css
• apps/mobile/babel.config 2.js
• apps/mobile/global.css

✅ Files skipped from review due to trivial changes (1)

• apps/mobile/theme/tokens.js

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/mobile/theme/colors.ts