feat(design-system): handoff 100% — biblioteca Arah* e tokens glass/watermark by sraphaz · Pull Request #284 · sraphaz/arah

sraphaz · 2026-06-18T07:36:32Z

Resumo

Completa o handoff do design system Arah no app Flutter: biblioteca de componentes Arah*, tokens glass/watermark, tema persistido, integrações em telas principais e documentação.

Mudanças

Componentes (`lib/core/widgets/`)

ArahButton, ArahCard, ArahGlassCard, ArahWatermark
ArahEmptyState, ArahLoadingIndicator, ArahListSkeleton
ArahScaffold com gradiente + watermark
ArahMotion para haptic/microinterações

Tokens e tema

app_design_tokens.dart — glass, watermark, earth, elevation, pinColorForType()
app_theme.dart — chip, FAB, dialog, bottomSheet, outlined, progress
theme_mode_provider.dart — tema dark/light/system persistido
design-tokens.css — tokens glass/watermark centralizados

Integrações

Login: ArahGlassCard + ArahButton
Feed: ArahEmptyState com CTA
Mapa: pins coloridos por tipo + bottom sheet em glass
Perfil: ProfileSkeleton + toggle de tema
Listas: ArahListSkeleton em moderation, subscriptions, membership, alerts, connections, assets, chat

Documentação

frontend/arah.app/docs/DESIGN_SYSTEM.md reescrito
docs/IMPLEMENTACAO_DESIGN_TOKENS_STATUS.md — Flutter handoff 100%

Correção CI (último commit)

ArahButton convertido para StatelessWidget (remove prefer_final_fields)
Import não utilizado removido de arah_card.dart

Validação local

flutter analyze --no-fatal-infos — sem warnings/erros
flutter test — 26 testes passando

Relacionado

PR feat(app): design system Arah + rebrand Ará → Arah #283 (mergeada) — design fidelity e l10n base
Handoff design system Flutter marcado 100% em IMPLEMENTACAO_DESIGN_TOKENS_STATUS.md

Summary by CodeRabbit

Release Notes

New Features

Theme switching with light, dark, and system theme options—theme selection persists across app sessions
Enhanced UI components: new glass-morphism cards, improved buttons with loading states, empty state screens, and skeleton loading placeholders
Visual watermark support throughout the app
Updated map pins with semantic color styling
Improved haptic feedback for user interactions

Documentation

Comprehensive design system documentation and Flutter implementation handoff completed

- Add Arah* widgets: Button, Card, GlassCard, Watermark, EmptyState, LoadingIndicator, ListSkeleton - Expand app_design_tokens with glass, watermark, earth, elevation, pin colors - Wire watermark into ArahScaffold; glass card on login and map bottom sheet - Theme completion: chip, FAB, dialog, bottomSheet, outlined, progress - Persist theme mode (dark/light/system) in preferences - Replace list spinners with skeletons; feed empty state with CTA - Map pins colored by semantic type - Centralize glass/watermark tokens in shared design-tokens.css - Update DESIGN_SYSTEM.md and IMPLEMENTACAO_DESIGN_TOKENS_STATUS.md Co-authored-by: Rapha <sraphaz@users.noreply.github.com>

coderabbitai · 2026-06-18T07:36:41Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: de535d98-d90a-4df7-89e0-9382590e3624

📥 Commits

Reviewing files that changed from the base of the PR and between 4704a61 and b38e2ce.

📒 Files selected for processing (40)

docs/IMPLEMENTACAO_DESIGN_TOKENS_STATUS.md
frontend/arah.app/docs/DESIGN_SYSTEM.md
frontend/arah.app/lib/app.dart
frontend/arah.app/lib/app_router.dart
frontend/arah.app/lib/core/config/constants.dart
frontend/arah.app/lib/core/providers/theme_mode_provider.dart
frontend/arah.app/lib/core/theme/app_design_tokens.dart
frontend/arah.app/lib/core/theme/app_theme.dart
frontend/arah.app/lib/core/theme/arah_motion.dart
frontend/arah.app/lib/core/widgets/app_snackbar.dart
frontend/arah.app/lib/core/widgets/arah_button.dart
frontend/arah.app/lib/core/widgets/arah_card.dart
frontend/arah.app/lib/core/widgets/arah_empty_state.dart
frontend/arah.app/lib/core/widgets/arah_glass_card.dart
frontend/arah.app/lib/core/widgets/arah_list_skeleton.dart
frontend/arah.app/lib/core/widgets/arah_loading_indicator.dart
frontend/arah.app/lib/core/widgets/arah_scaffold.dart
frontend/arah.app/lib/core/widgets/arah_watermark.dart
frontend/arah.app/lib/core/widgets/shimmer_skeleton.dart
frontend/arah.app/lib/features/alerts/presentation/screens/alerts_screen.dart
frontend/arah.app/lib/features/assets/presentation/screens/assets_screen.dart
frontend/arah.app/lib/features/auth/presentation/screens/login_screen.dart
frontend/arah.app/lib/features/chat/presentation/screens/chat_list_screen.dart
frontend/arah.app/lib/features/connections/presentation/screens/connections_screen.dart
frontend/arah.app/lib/features/feed/presentation/screens/feed_screen.dart
frontend/arah.app/lib/features/home/presentation/screens/main_shell_screen.dart
frontend/arah.app/lib/features/map/presentation/screens/map_screen.dart
frontend/arah.app/lib/features/marketplace/presentation/screens/marketplace_screen.dart
frontend/arah.app/lib/features/membership/presentation/screens/membership_screen.dart
frontend/arah.app/lib/features/moderation/presentation/screens/moderation_screen.dart
frontend/arah.app/lib/features/profile/presentation/screens/profile_screen.dart
frontend/arah.app/lib/features/profile/presentation/widgets/preferences_sheet.dart
frontend/arah.app/lib/features/subscriptions/presentation/screens/subscriptions_screen.dart
frontend/arah.app/lib/l10n/app_en.arb
frontend/arah.app/lib/l10n/app_localizations.dart
frontend/arah.app/lib/l10n/app_localizations_en.dart
frontend/arah.app/lib/l10n/app_localizations_pt.dart
frontend/arah.app/lib/l10n/app_pt.arb
frontend/arah.app/test/core/theme/app_design_tokens_test.dart
frontend/shared/styles/design-tokens.css

📝 Walkthrough

Walkthrough

This PR delivers the Flutter design system handoff by expanding AppDesignTokens and AppConstants with glass/watermark/semantic tokens, introducing eight new Arah* core widgets and the ArahMotion utility, adding a persisted themeModeProvider backed by SharedPreferences, and replacing CircularProgressIndicator loading placeholders and ad-hoc UI elements across all feature screens with the new components.

Changes

Arah Flutter Design System Handoff

Layer / File(s)	Summary
Design token expansion: glass, watermark, semantic colors, and constants `frontend/shared/styles/design-tokens.css`, `frontend/arah.app/lib/core/config/constants.dart`, `frontend/arah.app/lib/core/theme/app_design_tokens.dart`, `frontend/arah.app/test/core/theme/app_design_tokens_test.dart`	Adds `--glass-*` and watermark CSS custom properties; expands `AppDesignTokens` with glass/watermark constants plus `pinColorForType` and `elevation` helpers; extends `AppColors` with `success`, `info`, `earth`, `glassBackground`, `glassBorder`, `watermarkOpacity`, `bodyWatermarkOpacity` fields, `copyWith`, `lerp`, and dark/light presets; adds spacing, radius, breakpoint, animation, and `keyThemeMode` constants to `AppConstants`; unit tests cover `pinColorForType` and `elevation`.
AppTheme errorBorder and ArahMotion utility `frontend/arah.app/lib/core/theme/app_theme.dart`, `frontend/arah.app/lib/core/theme/arah_motion.dart`	Adds `errorBorder` to `InputDecorationTheme` using token radius and error color; introduces non-instantiable `ArahMotion` with `animationsEnabled`, `lightTap`, `selectionTap`, and `fast`/`normal`/`slow` duration getters.
Persisted theme mode provider and MaterialApp wiring `frontend/arah.app/lib/core/providers/theme_mode_provider.dart`, `frontend/arah.app/lib/app.dart`	Introduces `ThemeModeNotifier` / `themeModeProvider` defaulting to `ThemeMode.dark`, loading from and persisting to `SharedPreferences` under `keyThemeMode`; wires the watched mode into `MaterialApp.router`'s `themeMode`, replacing the hard-coded value.
New Arah core widgets: watermark, loading, button, cards, empty state, skeleton, snackbar `frontend/arah.app/lib/core/widgets/arah_watermark.dart`, `frontend/arah.app/lib/core/widgets/arah_loading_indicator.dart`, `frontend/arah.app/lib/core/widgets/arah_button.dart`, `frontend/arah.app/lib/core/widgets/arah_card.dart`, `frontend/arah.app/lib/core/widgets/arah_glass_card.dart`, `frontend/arah.app/lib/core/widgets/arah_empty_state.dart`, `frontend/arah.app/lib/core/widgets/arah_list_skeleton.dart`, `frontend/arah.app/lib/core/widgets/app_snackbar.dart`, `frontend/arah.app/lib/core/widgets/arah_scaffold.dart`, `frontend/arah.app/lib/core/widgets/shimmer_skeleton.dart`	Adds `ArahWatermark` (SVG + `IgnorePointer`), `ArahLoadingIndicator` (themed spinner), `ArahButton` with three variants and haptic press, `ArahCard` (scale animation + elevation), `ArahGlassCard` (`BackdropFilter` blur), `ArahEmptyState` (icon/title/CTA column), `ArahListSkeleton` (shimmer list); updates `app_snackbar` to use design tokens; integrates `ArahWatermark` into `ArahScaffold` via `showWatermark` flag; migrates `FeedCardSkeleton` to `ArahCard` with tokenized constants.
Localization additions for appearance and theme UI `frontend/arah.app/lib/l10n/app_en.arb`, `frontend/arah.app/lib/l10n/app_pt.arb`, `frontend/arah.app/lib/l10n/app_localizations.dart`, `frontend/arah.app/lib/l10n/app_localizations_en.dart`, `frontend/arah.app/lib/l10n/app_localizations_pt.dart`	Adds `darkMode`, `useSystemTheme`, `viewDetails`, `createFirstPost`, and `appearance` keys to the abstract API and both locale implementations.
Feature screen updates: skeletons, glass, theme toggle, map pins `frontend/arah.app/lib/app_router.dart`, `frontend/arah.app/lib/features/alerts/...`, `frontend/arah.app/lib/features/assets/...`, `frontend/arah.app/lib/features/auth/...`, `frontend/arah.app/lib/features/chat/...`, `frontend/arah.app/lib/features/connections/...`, `frontend/arah.app/lib/features/feed/...`, `frontend/arah.app/lib/features/home/...`, `frontend/arah.app/lib/features/map/...`, `frontend/arah.app/lib/features/marketplace/...`, `frontend/arah.app/lib/features/membership/...`, `frontend/arah.app/lib/features/moderation/...`, `frontend/arah.app/lib/features/profile/...`, `frontend/arah.app/lib/features/subscriptions/...`	Replaces `CircularProgressIndicator` loading placeholders with `ArahListSkeleton` or `ArahLoadingIndicator` across all feature screens; wraps login form in `ArahGlassCard` and swaps continue button to `ArahButton`; adds `onGoToCreatePost` callback through `FeedScreen`/`_FeedBody`/`_FeedList` wired to tab navigation; updates map pin colors via `pinColorForType` and bottom sheet via `ArahGlassCard`/`ArahButton`; adds dark/system theme switches in `PreferencesSheet` via `themeModeProvider`.
Documentation updates `docs/IMPLEMENTACAO_DESIGN_TOKENS_STATUS.md`, `frontend/arah.app/docs/DESIGN_SYSTEM.md`	Marks Fase 4 as 100% complete with Flutter handoff subsection; rewrites `DESIGN_SYSTEM.md` with token/component tables, `Tema claro/escuro` section, and updated `Resumo`.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

sraphaz/arah#280: Modifies assets_screen.dart and moderation_screen.dart loading-state rendering paths, which this PR also replaces with ArahListSkeleton.
sraphaz/arah#283: Touches app_design_tokens.dart, app_theme.dart, and ArahScaffold, which are all directly extended by the token and scaffold changes in this PR.

Poem

🐇 Hop hop! The tokens bloom,
Glass cards shimmer, shadows loom.
Dark mode persists, the watermark glows,
Skeletons shimmer where the spinner once froze.
Every screen now speaks in design,
With Arah* widgets, crisp and fine! 🌙

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch cursor/design-handoff-100-f45b

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

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

- Converte ArahButton para StatelessWidget (remove _pressed não usado) - Remove import não utilizado em arah_card.dart Co-authored-by: Rapha <sraphaz@users.noreply.github.com>

fix(design-system): corrige analyze CI em ArahButton e ArahCard

b38e2ce

- Converte ArahButton para StatelessWidget (remove _pressed não usado) - Remove import não utilizado em arah_card.dart Co-authored-by: Rapha <sraphaz@users.noreply.github.com>

cursor Bot marked this pull request as ready for review June 18, 2026 07:50

cursor Bot merged commit 4cb0a95 into main Jun 18, 2026
9 checks passed

cursor Bot deleted the cursor/design-handoff-100-f45b branch June 18, 2026 07:50

sraphaz mentioned this pull request Jun 27, 2026

feat: Governança comunitária (votações) no app + jornada BFF #287

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(design-system): handoff 100% — biblioteca Arah* e tokens glass/watermark#284

feat(design-system): handoff 100% — biblioteca Arah* e tokens glass/watermark#284
cursor[bot] merged 2 commits into
mainfrom
cursor/design-handoff-100-f45b

sraphaz commented Jun 18, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 18, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

sraphaz commented Jun 18, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Resumo

Mudanças

Componentes (lib/core/widgets/)

Tokens e tema

Integrações

Documentação

Correção CI (último commit)

Validação local

Relacionado

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sraphaz commented Jun 18, 2026 •

edited by coderabbitai Bot

Loading

Componentes (`lib/core/widgets/`)

coderabbitai Bot commented Jun 18, 2026 •

edited

Loading