[Refactor] Rediseño UI con Material Design 3 + Dynamic Color#110
Open
omartosca wants to merge 5 commits intojavikin:mainfrom
Open
[Refactor] Rediseño UI con Material Design 3 + Dynamic Color#110omartosca wants to merge 5 commits intojavikin:mainfrom
omartosca wants to merge 5 commits intojavikin:mainfrom
Conversation
- Rewrite README.md: update project status from pre-development to Beta, add gamification/notifications/Design System v2 features, add Build & Run instructions, complete tech stack table, update roadmap and contributions sections, define MIT license - Update CLAUDE.md: remove outdated pre-development next steps, add Room v6 schema table (12 tables), update feature list with all implemented extras, update project structure tree, add current status and upcoming release steps - Create AGENTS.md: portable AI agent guide with naming conventions, architecture overview, DB schema, module map, testing patterns, and what to avoid - Create .claude/rules/: three focused rule files for agents (naming.md, architecture.md, testing.md) with code examples
- Theme.kt: enable dynamicDarkColorScheme/dynamicLightColorScheme on API 31+, keep sage teal palette as fallback for Android < 12 - UmbralTopBar: remove isSystemInDarkTheme + hardcoded color constants, use MaterialTheme.colorScheme.background - UmbralButton: replace hardcoded Color(0xFF151515) contentColor with MaterialTheme.colorScheme.onPrimary for Primary variant - UmbralCard: replace all hardcoded Dark/LightBackground* and Border* constants with MD3 colorScheme roles (surface, surfaceContainerHigh, outline, outlineVariant, primary) - UmbralBottomBar: replace deprecated Divider with HorizontalDivider
Replace hardcoded color constants and fragile isDark checks across 13 components: - UmbralSwitch: trackColor/thumbColor → colorScheme.primary/onPrimary/outline/onSurfaceVariant - UmbralCheckbox: Color.White (in Canvas) → colorScheme.onPrimary captured in composable scope - UmbralIconButton: Color(0xFF151515) → colorScheme.onPrimary; preview backgrounds → surfaceContainer - UmbralSurface: Level0-3 elevation → colorScheme.background/surface/surfaceContainerHigh/surfaceContainerHighest - UmbralDivider: DarkBorderDefault/LightBorderDefault → colorScheme.outlineVariant - UmbralSnackbar: hacky isDark (background color comparison) → isSystemInDarkTheme(); DarkBackgroundElevated → surfaceContainerHigh; DarkTextPrimary → onSurface; DarkError → colorScheme.error - UmbralToast: hacky isDark (surface color comparison) → surfaceContainerHigh + onSurface - UmbralSkeleton: Color(0xFF252525/0xFFE8E8E8) → surfaceContainerHigh; Color(0xFF303030/0xFFF5F5F5) → surfaceContainerHighest - UmbralBadge: isDark (background comparison) → isSystemInDarkTheme(); Default badge → colorScheme.primary/onPrimary; Error → colorScheme.error/onError; Neutral → surfaceVariant/onSurfaceVariant - UmbralAvatar: DarkAccentPrimary/DarkSuccess/DarkTextTertiary → colorScheme.primary/tertiary/onSurfaceVariant - UmbralTag: remove unused DarkAccentPrimary/LightAccentPrimary imports - EmptyStateIllustrations: DarkAccentPrimary/DarkTextTertiary → colorScheme.primary/onSurfaceVariant - ProfileCard (ActiveBadge): Color(0xFF4CAF50) → colorScheme.tertiary
- StatsScreen: PercentageChangeChip uses colorScheme.tertiary (positive) and colorScheme.error (negative) instead of Color(0xFF4CAF50/F44336) - SettingsScreen: PermissionRow successColor uses colorScheme.tertiary instead of Color(0xFF4CAF50); remove unused Color import in both files HomeScreen, ProfilesScreen, ProfileDetailScreen and all onboarding screens were already clean — no changes needed.
omartosca
changed the title
- ThemeUtils: gradient/brush functions now read from MaterialTheme.colorScheme (background, surface, surfaceContainerHigh, primary, primaryContainer, outlineVariant) instead of hand-picking dark/light named constants - ThemeUtils: accentDimmed(), dividerColor(), shimmerBrush(), surfaceColorAtElevation() all migrated to colorScheme roles - UmbralCard legacy overloads: containerColor uses surfaceColorAtElevation() without isSystemInDarkTheme(); removed unused import - WidgetTheme: Color(0xFFFFFFFF) → Color.White - BlockingActivity: timer/streak icon tints and glow color use colorScheme.primary / colorScheme.tertiary
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
1 participant
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.
Summary
Migración completa del Design System de Umbral a Material Design 3 con soporte de Dynamic Color (Material You), manteniendo la paleta sage teal como fallback en Android < 12.
Theme.ktcondynamicDarkColorScheme/dynamicLightColorSchemeen API 31+;UmbralLightColorSchemeyUmbralDarkColorSchemeconlightColorScheme()/darkColorScheme()como fallback;Color.ktampliado con todos los roles MD3UmbralTopBaryUmbralBottomBarmigrados aTopAppBarDefaultsyNavigationBarDefaults;UmbralButtonmapeado a variantes MD3 nativas (Button,FilledTonalButton,OutlinedButton,TextButton);UmbralCardmapeado aElevatedCard/OutlinedCard/CardUmbralSnackbar,UmbralToast,UmbralSkeleton,UmbralBadge,UmbralAvatar,UmbralTag,EmptyStateIllustrations,ProfileCard,UmbralSwitch,UmbralCheckbox,UmbralIconButton,UmbralSurface,UmbralDividerStatsScreenySettingsScreen— últimas referencias aColor(0xFF...)reemplazadas porcolorScheme.tertiary/colorScheme.errorPatrón eliminado en todos los componentes:
Los colores sin equivalente MD3 (
DarkSuccess,LightWarning) se mantienen conisSystemInDarkTheme()— uso correcto de la API.Test plan
./gradlew test— sin regresiones (el cambio es visual/de theme)ComponentCatalogScreencon dynamic color aplicado