refactor(ui): map raw gray classes to semantic tokens across account views#79
Open
anilcancakir wants to merge 5 commits into
Open
refactor(ui): map raw gray classes to semantic tokens across account views#79anilcancakir wants to merge 5 commits into
anilcancakir wants to merge 5 commits into
Conversation
…views Replace raw gray/slate/zinc Tailwind classes with the standard semantic aliases (text-fg, text-fg-muted, bg-surface(-container[-high]), border-color-border[-subtle]) across the auth/profile/team/notification views, widgets, and app layout, so the starter surfaces re-theme to any consumer palette instead of the default gray. Deliberately preserves opacity/interaction-state greys and the fixed-white QR container; the token source (magic_starter_tokens.dart) is untouched. Tokens-only, no logic change.
There was a problem hiding this comment.
Pull request overview
Refactors the account-related UI surfaces to use semantic Wind alias tokens (bg-surface*, text-fg*, border-color-border*) instead of literal gray-* utilities, so consumer themes/dark-mode pairs can drive styling consistently across the starter’s account experience.
Changes:
- Replaced many hardcoded
gray-*background/border/text classes with semantic alias tokens across auth, profile, teams, notifications, layout, and related dialogs. - Updated pagination/empty-state/list-row styling in notifications to use semantic fg/surface/border tokens.
- Added a CHANGELOG entry documenting the semantic-token migration for account views.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| lib/src/ui/widgets/magic_starter_two_factor_modal.dart | Converts manual-entry and recovery-code surfaces/text from gray utilities to semantic tokens. |
| lib/src/ui/widgets/magic_starter_password_confirm_dialog.dart | Updates password-visibility icon color to text-fg-muted. |
| lib/src/ui/views/teams/magic_starter_team_settings_view.dart | Migrates empty-states, chips, dividers, and menu surfaces/borders to semantic tokens. |
| lib/src/ui/views/teams/magic_starter_team_invitation_accept_view.dart | Updates success message text to semantic muted fg token. |
| lib/src/ui/views/profile/magic_starter_profile_settings_view.dart | Migrates multiple profile/settings surfaces, labels, and two-factor UI to semantic tokens (with a few remaining gray hover/surface utilities noted in comments). |
| lib/src/ui/views/notifications/magic_starter_notifications_list_view.dart | Updates empty state and list rows to semantic fg/border/surface tokens (with gray hover utility still present on row hover). |
| lib/src/ui/views/notifications/magic_starter_notification_preferences_view.dart | Converts empty state and row styling to semantic tokens. |
| lib/src/ui/views/auth/magic_starter_reset_password_view.dart | Updates success message and password icon colors to semantic fg tokens. |
| lib/src/ui/views/auth/magic_starter_register_view.dart | Updates password icons and legal/newsletter helper text to semantic muted fg token. |
| lib/src/ui/views/auth/magic_starter_otp_verify_view.dart | Converts resend-link text from gray utilities to semantic muted fg token. |
| lib/src/ui/views/auth/magic_starter_login_view.dart | Updates password icon and identity selector styling to semantic fg/border/surface tokens. |
| lib/src/ui/views/auth/magic_starter_forgot_password_view.dart | Updates success message text to semantic muted fg token. |
| lib/src/ui/layouts/magic_starter_app_layout.dart | Migrates app shell/navigation text and borders to semantic tokens and sets bottom bar background to bg-surface. |
| CHANGELOG.md | Documents the account-view semantic-token migration under [Unreleased] > Changed. |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Five spots kept hardcoded Tailwind grays that bypassed the semantic alias map: three bordered buttons and a session row in profile settings, and a notification list row. Map the neutral hovers to hover:bg-surface-container (matching the sessions view bordered-button convention) and the session row fill to bg-surface-container, so consumer themes drive them. Flagged by Copilot on the semantic-token PR.
The mobile bottom tab bar (below lg) builds one item per registered bottomItem, but no test registered bottomItems, so the semantic-token icon/label styling there was uncovered. Render an active bottomItem at mobile width to exercise it.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The account surface (auth screens, profile, notifications, team settings/invitations, app layout, and the password-confirm / two-factor dialogs) styled its surfaces, borders, and text with literal
gray-*Tailwind classes.Change
Map them to the semantic alias tokens (
bg-surface*,text-fg*,border-color-border*), so a consumer's theme and dark-mode pairs drive the account surface and it matches the rest of the design system. Pure class-name refactor, no behavior change.Notes
lib/src/ui/.[Unreleased] > Changed.