refactor(core, feature): replaced hard-coded colors. (#1873)

Co-authored-by: Sk Niyaj Ali <niyaj639@gmail.com>

core/designsystem/src/commonMain/kotlin/org/mifospay/core/designsystem/component/BottomSheet.kt

@@ -13,6 +13,7 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.height
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
@@ -22,7 +23,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.arkivanov.essenty.backhandler.BackCallback
 import kotlinx.coroutines.launch
@@ -54,7 +54,7 @@ fun MifosBottomSheet(
 
     AnimatedVisibility(visible = showBottomSheet) {
         ModalBottomSheet(
-            containerColor = Color.White,
+            containerColor = MaterialTheme.colorScheme.surfaceContainerLowest,
             onDismissRequest = {
                 showBottomSheet = false
                 dismissSheet()

core/designsystem/src/commonMain/kotlin/org/mifospay/core/designsystem/theme/Color.kt

@@ -9,102 +9,22 @@
  */
 package org.mifospay.core.designsystem.theme
 
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
-// val md_theme_light_primary = Color(0xFF0673BA) // primary
-// val md_theme_light_onPrimary = Color(0xFFFFFFFF) // gradientOne
-// val md_theme_light_primaryContainer = Color(0xFFF5F5F5) // container color
-// val md_theme_light_onPrimaryContainer = Color(0xFF3E001D)
-//
-// val md_theme_light_secondary = Color(0xFF984061)
-// val md_theme_light_onSecondary = Color(0xFFFFFFFF)
-// val md_theme_light_secondaryContainer = Color(0xFFFFD9E2)
-// val md_theme_light_onSecondaryContainer = Color(0xFF3E001D)
-//
-// val md_theme_light_tertiary = Color(0xFF7D4996)
-// val md_theme_light_onTertiary = Color(0xFFFFFFFF)
-// val md_theme_light_tertiaryContainer = Color(0xFFF6D9FF)
-// val md_theme_light_onTertiaryContainer = Color(0xFF310049)
-//
-// val md_theme_light_error = Color(0xFFBA1A1A)
-// val md_theme_light_errorContainer = Color(0xFFFFDAD6)
-// val md_theme_light_onError = Color(0xFFFFFFFF)
-// val md_theme_light_onErrorContainer = Color(0xFF410002)
-//
-// val md_theme_light_background = Color(0xFFFFFBFF)
-// val md_theme_light_onBackground = Color(0xFF330045)
-//
-// val md_theme_light_surface = Color(0xFFFFFBFF)
-// val md_theme_light_onSurface = Color(0xFF333333) // onSurface
-// val md_theme_light_surfaceVariant = Color(0xFFF2DDE1)
-// val md_theme_light_onSurfaceVariant = Color(0xFF514347)
-// val md_theme_light_surfaceTint = Color(0xFF984061)
-//
-// val md_theme_light_outline = Color(0xFF837377)
-// val md_theme_light_outlineVariant = Color(0xFFD5C2C6)
-//
-// val md_theme_light_inverseOnSurface = Color(0xFFFFEBFF)
-// val md_theme_light_inverseSurface = Color(0xFF4D1661)
-// val md_theme_light_inversePrimary = Color(0xFFFFB1C8)
-//
-// val md_theme_light_shadow = Color(0xFF000000)
-// val md_theme_light_scrim = Color(0xFF000000)
-//
-//
-// // val md_theme_dark_primary = Color(0xFFFFFFFF)
-// val md_theme_dark_primary = Color(0xFF80CFFF)
-// val md_theme_dark_onPrimary = Color(0xFF000000)
-// val md_theme_dark_primaryContainer = Color(0xFF7B2949)
-// val md_theme_dark_onPrimaryContainer = Color(0xFFFFD9E2)
-//
-// val md_theme_dark_secondary = Color(0xFFFFB1C8)
-// val md_theme_dark_onSecondary = Color(0xFF5E1133)
-// val md_theme_dark_secondaryContainer = Color(0xFF7B2949)
-// val md_theme_dark_onSecondaryContainer = Color(0xFFFFD9E2)
-//
-// val md_theme_dark_tertiary = Color(0xFFE8B3FF)
-// val md_theme_dark_onTertiary = Color(0xFF4A1764)
-// val md_theme_dark_tertiaryContainer = Color(0xFF63307C)
-// val md_theme_dark_onTertiaryContainer = Color(0xFFF6D9FF)
-//
-// val md_theme_dark_error = Color(0xFFFFB4AB)
-// val md_theme_dark_errorContainer = Color(0xFF93000A)
-// val md_theme_dark_onError = Color(0xFF690005)
-// val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
-//
-// val md_theme_dark_background = Color(0xFF330045)
-// val md_theme_dark_onBackground = Color(0xFFFAD7FF)
-//
-// // val md_theme_dark_surface = Color(0xFF000000)
-// val md_theme_dark_surface = Color(0xFF1E1E1E)
-// val md_theme_dark_onSurface = Color(0xFFFFFFFF)
-// val md_theme_dark_surfaceVariant = Color(0xFF514347)
-// val md_theme_dark_onSurfaceVariant = Color(0xFFD5C2C6)
-// val md_theme_dark_surfaceTint = Color(0xFFFFB1C8)
-//
-// val md_theme_dark_outline = Color(0xFF9E8C90)
-// val md_theme_dark_outlineVariant = Color(0xFF514347)
-//
-// val md_theme_dark_inverseOnSurface = Color(0xFF330045)
-// val md_theme_dark_inverseSurface = Color(0xFFFAD7FF)
-// val md_theme_dark_inversePrimary = Color(0xFF984061)
-//
-// val md_theme_dark_shadow = Color(0xFF000000)
-// val md_theme_dark_scrim = Color(0xFF000000)
-
-// Primary Light
-val primaryLight = Color(0xFF0673BA) // Main brand color
-val onPrimaryLight = Color(0xFFFFFFFF) // Contrast text/icon on primary
-val primaryContainerLight = Color(0xFFCEEAFD) // Lighter tone for background of components
-val onPrimaryContainerLight = Color(0XFF033D63) // 	Text/icon over container
-val secondaryLight = Color(0xFF984061) // Main secondary tone, rich and expressive
-val onSecondaryLight = Color(0xFFFFFFFF) // Best contrast for readable text/icons
-val secondaryContainerLight = Color(0xFFF0DBE3) // Soft container tone
-val onSecondaryContainerLight = Color(0xFF361722) // Dark text/icon for contrast on container
-val tertiaryLight = Color(0xFF7D4996) // Base tertiary
-val onTertiaryLight = Color(0xFFFFFFFF) // Light text/icons on tertiary
-val tertiaryContainerLight = Color(0XFFE9DDEE) // soft pastel background variant
-val onTertiaryContainerLight = Color(0xFF2B1934) // Deep tone for legibility over container
+val primaryLight = Color(0xFF0673BA)
+val onPrimaryLight = Color(0xFFFFFFFF)
+val primaryContainerLight = Color(0xFFCEEAFD)
+val onPrimaryContainerLight = Color(0xFF033D63)
+val secondaryLight = Color(0xFF984061)
+val onSecondaryLight = Color(0xFFFFFFFF)
+val secondaryContainerLight = Color(0xFFF0DBE3)
+val onSecondaryContainerLight = Color(0xFF361722)
+val tertiaryLight = Color(0xFF7D4996)
+val onTertiaryLight = Color(0xFFFFFFFF)
+val tertiaryContainerLight = Color(0XFFE9DDEE)
+val onTertiaryContainerLight = Color(0xFF2B1934)
 val errorLight = Color(0xFFBA1A1A)
 val onErrorLight = Color(0xFFFFFFFF)
 val errorContainerLight = Color(0xFFFFDAD6)
@@ -129,18 +49,18 @@ val surfaceContainerLight = Color(0xFFECEEF4)
 val surfaceContainerHighLight = Color(0xFFE6E8EE)
 val surfaceContainerHighestLight = Color(0xFFE0E2E9)
 
-val primaryDark = Color(0xFF9CD6FC) // Slightly desaturated light tone
-val onPrimaryDark = Color(0xFF033D63) // Dark enough to maintain contrast
-val primaryContainerDark = Color(0xFF044C7C) // Deep tone for component background
-val onPrimaryContainerDark = Color(0XFFE6F5FE) // Light text/icon over container
-val secondaryDark = Color(0xFFD9A5B8) // Softer tone for dark surfaces
-val onSecondaryDark = Color(0xFF361722) // Still provides strong contrast
-val secondaryContainerDark = Color(0xFF5A2639) // Deep tone for container
-val onSecondaryContainerDark = Color(0xFFF0DBE3) // 	Light foreground over container
-val tertiaryDark = Color(0xFFC7A9D6) // bright pop for dark mode
-val onTertiaryDark = Color(0xFF3A2145) // Deep text/icon for contrast
-val tertiaryContainerDark = Color(0xFF653A78) // Solid background fill
-val onTertiaryContainerDark = Color(0xFFF4EEF7) // Light text/icons over container
+val primaryDark = Color(0xFF9CD6FC)
+val onPrimaryDark = Color(0xFF033D63)
+val primaryContainerDark = Color(0xFF044C7C)
+val onPrimaryContainerDark = Color(0xFFE6F5FE)
+val secondaryDark = Color(0xFFD9A5B8)
+val onSecondaryDark = Color(0xFF361722)
+val secondaryContainerDark = Color(0xFF5A2639)
+val onSecondaryContainerDark = Color(0xFFF0DBE3)
+val tertiaryDark = Color(0xFFC7A9D6)
+val onTertiaryDark = Color(0xFF3A2145)
+val tertiaryContainerDark = Color(0xFF653A78)
+val onTertiaryContainerDark = Color(0xFFF4EEF7)
 val errorDark = Color(0xFFFFB4AB)
 val onErrorDark = Color(0xFF690005)
 val errorContainerDark = Color(0xFF93000A)
@@ -165,8 +85,11 @@ val surfaceContainerDark = Color(0xFF1C2025)
 val surfaceContainerHighDark = Color(0xFF272A2F)
 val surfaceContainerHighestDark = Color(0xFF32353A)
 
-// New UI Colors
 object NewUi {
-    val walletColor1 = Color(0xFF1f7dd5)
-    val walletColor2 = Color(0xFF1ec0a0)
+    val walletColor1: Color
+        @Composable
+        get() = MaterialTheme.colorScheme.primary
+    val walletColor2: Color
+        @Composable
+        get() = MaterialTheme.colorScheme.secondary
 }

core/designsystem/src/commonMain/kotlin/org/mifospay/core/designsystem/theme/MifosTextStyle.kt

@@ -44,5 +44,5 @@ val styleMifosTopBar =
         fontSize = 20.sp,
     )
 
-val styleSettingsButton = TextStyle(color = Color.White, textAlign = TextAlign.Center)
-val historyItemTextStyle = TextStyle(color = Color.Black, fontSize = 16.sp)
+val styleSettingsButton = TextStyle(textAlign = TextAlign.Center)
+val historyItemTextStyle = TextStyle(fontSize = 16.sp)

core/ui/src/commonMain/kotlin/org/mifospay/core/ui/ExpiryDateInput.kt

@@ -26,9 +26,10 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.FocusRequester.Companion.FocusRequesterFactory.component1
+import androidx.compose.ui.focus.FocusRequester.Companion.FocusRequesterFactory.component2
 import androidx.compose.ui.focus.focusProperties
 import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextRange
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
@@ -119,9 +120,9 @@ fun FormattedDateView(
         text = char,
         style = MaterialTheme.typography.headlineSmall,
         color = if (isFocused) {
-            Color.DarkGray
+            MaterialTheme.colorScheme.outline
         } else {
-            Color.LightGray
+            MaterialTheme.colorScheme.outlineVariant
         },
         textAlign = TextAlign.Center,
     )

core/ui/src/commonMain/kotlin/org/mifospay/core/ui/HeadingTitle.kt

@@ -19,7 +19,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
@@ -58,7 +57,7 @@ fun VerifyStepHeader(
                 Icon(
                     imageVector = MifosIcons.Check,
                     contentDescription = null,
-                    tint = if (isVerified) MaterialTheme.colorScheme.onSurface else Color.Gray,
+                    tint = if (isVerified) MaterialTheme.colorScheme.onSurface else MaterialTheme.colorScheme.outline,
                     modifier = Modifier.size(24.dp),
                 )
             }
@@ -77,5 +76,7 @@ fun VerifyStepHeaderVerifiedPreview() {
 @Preview
 @Composable
 fun VerifyStepHeaderUnverifiedPreview() {
-    VerifyStepHeader(text = "Enter OTP ", isVerified = false)
+    MifosTheme {
+        VerifyStepHeader(text = "Enter OTP ", isVerified = false)
+    }
 }

core/ui/src/commonMain/kotlin/org/mifospay/core/ui/OtpTextField.kt

@@ -29,7 +29,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextRange
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
@@ -94,11 +93,11 @@ fun OtpTextField(
             },
         )
         if (isError) {
-            // display erro message in text
+            // display error message in text
             Text(
                 text = "Invalid OTP",
                 style = MaterialTheme.typography.bodyMedium,
-                color = Color.Red,
+                color = MaterialTheme.colorScheme.error,
                 textAlign = TextAlign.Center,
                 modifier = Modifier.padding(top = 8.dp),
             )
@@ -125,9 +124,9 @@ fun CharView(
         text = char,
         style = MaterialTheme.typography.headlineSmall,
         color = if (isFocused) {
-            Color.DarkGray
+            MaterialTheme.colorScheme.outline
         } else {
-            Color.LightGray
+            MaterialTheme.colorScheme.outlineVariant
         },
         textAlign = TextAlign.Center,
     )

core/ui/src/commonMain/kotlin/org/mifospay/core/ui/PasswordStrengthIndicator.kt

@@ -42,7 +42,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawBehind
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.TransformOrigin
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.platform.testTag
@@ -89,10 +88,10 @@ fun CombinedPasswordErrorCard(
         PasswordStrengthState.NONE -> MaterialTheme.colorScheme.error
         PasswordStrengthState.WEAK_1 -> MaterialTheme.colorScheme.error
         PasswordStrengthState.WEAK_2 -> MaterialTheme.colorScheme.error
-        PasswordStrengthState.WEAK_3 -> weakColor
+        PasswordStrengthState.WEAK_3 -> MaterialTheme.colorScheme.error
         PasswordStrengthState.GOOD -> MaterialTheme.colorScheme.primary
-        PasswordStrengthState.STRONG -> strongColor
-        PasswordStrengthState.VERY_STRONG -> Color.Magenta
+        PasswordStrengthState.STRONG -> MaterialTheme.colorScheme.primary
+        PasswordStrengthState.VERY_STRONG -> MaterialTheme.colorScheme.tertiary
     }
 
     val animatedIndicatorColor by animateColorAsState(
@@ -282,10 +281,10 @@ fun PasswordStrengthIndicator(
         PasswordStrengthState.NONE -> MaterialTheme.colorScheme.error
         PasswordStrengthState.WEAK_1 -> MaterialTheme.colorScheme.error
         PasswordStrengthState.WEAK_2 -> MaterialTheme.colorScheme.error
-        PasswordStrengthState.WEAK_3 -> weakColor
+        PasswordStrengthState.WEAK_3 -> MaterialTheme.colorScheme.error
         PasswordStrengthState.GOOD -> MaterialTheme.colorScheme.primary
-        PasswordStrengthState.STRONG -> strongColor
-        PasswordStrengthState.VERY_STRONG -> Color.Magenta
+        PasswordStrengthState.STRONG -> MaterialTheme.colorScheme.primary
+        PasswordStrengthState.VERY_STRONG -> MaterialTheme.colorScheme.tertiary
     }
     val animatedIndicatorColor by animateColorAsState(
         targetValue = indicatorColor,
@@ -346,7 +345,7 @@ private fun MinimumCharacterCount(
 ) {
     val characterCountColor by animateColorAsState(
         targetValue = if (minimumRequirementMet) {
-            strongColor
+            MaterialTheme.colorScheme.primary
         } else {
             MaterialTheme.colorScheme.surfaceDim
         },
@@ -390,9 +389,6 @@ enum class PasswordStrengthState {
     VERY_STRONG,
 }
 
-private val strongColor = Color(0xFF41B06D)
-private val weakColor = Color(0xFF8B6609)
-
 @Preview
 @Composable
 private fun PasswordStrengthIndicatorPreview_minCharMet() {

core/ui/src/commonMain/kotlin/org/mifospay/core/ui/TransactionItemCard.kt

@@ -73,7 +73,7 @@ fun TransactionItemCard(
                     style = TextStyle(
                         fontSize = 10.sp,
                         fontWeight = FontWeight(400),
-                        color = Color(0x66000000),
+                        color = MaterialTheme.colorScheme.onSurface,
                     ),
                 )
             }
@@ -99,12 +99,14 @@ fun TransactionItemCard(
                             green = 0f,
                             blue = 0f,
                         )
+
                         TransactionType.CREDIT -> MaterialTheme.colorScheme.onTertiaryContainer.copy(
                             red = 0f,
                             green = 0.51f,
                             blue = 0.21f,
                         )
-                        else -> Color.Black
+
+                        else -> MaterialTheme.colorScheme.scrim
                     },
                     textAlign = TextAlign.End,
                 ),
@@ -195,12 +197,14 @@ fun TransactionItem(
                                 green = 0.51f,
                                 blue = 0.21f,
                             )
+
                             TransactionType.DEBIT -> MaterialTheme.colorScheme.error.copy(
                                 red = 0.8f,
                                 green = 0f,
                                 blue = 0f,
                             )
-                            else -> Color.Black
+
+                            else -> MaterialTheme.colorScheme.scrim
                         },
                         textAlign = TextAlign.End,
                     ),

feature/accounts/src/commonMain/kotlin/org/mifospay/feature/accounts/AccountsScreen.kt

@@ -652,10 +652,9 @@ private fun StatusChip(label: String) {
             blue = 0.94f,
         )
     }
-
     MifosSmallChip(
         label = label,
         containerColor = color,
-        contentColor = Color.Black,
+        contentColor = MaterialTheme.colorScheme.scrim,
     )
 }

feature/accounts/src/commonMain/kotlin/org/mifospay/feature/accounts/savingsaccount/details/SavingAccountDetailScreen.kt

@@ -45,7 +45,6 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
@@ -477,17 +476,17 @@ private fun SavingAccountStatusCard(
 @Composable
 private fun StatusChip(label: String) {
     val color = when (label) {
-        "Pending Approval" -> Color(0xFFFFF9C4)
-        "Approved" -> Color(0xFFC8E6C9)
-        "Rejected" -> Color(0xFFFFCDD2)
-        "Withdrawn" -> Color(0xFFE1BEE7)
-        "Active" -> Color(0xFFBBDEFB)
-        "Closed" -> Color(0xFFCFD8DC)
-        "Prematurely Closed" -> Color(0xFFD7CCC8)
-        "Transfer in Progress" -> Color(0xFFFFE0B2)
-        "Transfer on Hold" -> Color(0xFFF0F4C3)
-        "Matured" -> Color(0xFFB2DFDB)
-        else -> Color(0xFFEFEFEF)
+        "Pending Approval" -> MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.6f)
+        "Approved" -> MaterialTheme.colorScheme.tertiaryContainer
+        "Rejected" -> MaterialTheme.colorScheme.errorContainer
+        "Withdrawn" -> MaterialTheme.colorScheme.secondaryContainer
+        "Active" -> MaterialTheme.colorScheme.primaryContainer
+        "Closed" -> MaterialTheme.colorScheme.surfaceVariant
+        "Prematurely Closed" -> MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.8f)
+        "Transfer in Progress" -> MaterialTheme.colorScheme.tertiaryContainer.copy(alpha = 0.7f)
+        "Transfer on Hold" -> MaterialTheme.colorScheme.secondaryContainer.copy(alpha = 0.7f)
+        "Matured" -> MaterialTheme.colorScheme.tertiaryContainer
+        else -> MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f)
     }
 
     SuggestionChip(

feature/history/src/commonMain/kotlin/org/mifospay/feature/history/components/TransactionList.kt

@@ -154,12 +154,14 @@ internal fun TransactionItem(
                             green = 0.51f,
                             blue = 0.21f,
                         )
+
                         TransactionType.DEBIT -> MaterialTheme.colorScheme.error.copy(
                             red = 0.8f,
                             green = 0f,
                             blue = 0f,
                         )
-                        else -> Color.Black
+
+                        else -> MaterialTheme.colorScheme.scrim
                     },
                     contentDescription = null,
                 )
@@ -180,12 +182,14 @@ internal fun TransactionItem(
                                 green = 0.51f,
                                 blue = 0.21f,
                             )
+
                             TransactionType.DEBIT -> MaterialTheme.colorScheme.error.copy(
                                 red = 0.8f,
                                 green = 0f,
                                 blue = 0f,
                             )
-                            else -> Color.Black
+
+                            else -> MaterialTheme.colorScheme.scrim
                         },
                         textAlign = TextAlign.End,
                     ),

feature/home/src/commonMain/kotlin/org/mifospay/feature/home/HomeScreen.kt

@@ -66,6 +66,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontWeight
@@ -335,10 +336,12 @@ private fun AccountCard(
     onMarkAsDefault: (Long, String) -> Unit,
     modifier: Modifier = Modifier,
     onClick: (Long) -> Unit,
+    gradientStartColor: Color = NewUi.walletColor1,
+    gradientEndColor: Color = NewUi.walletColor2,
 ) {
     val brush = remember {
         Brush.linearGradient(
-            colors = listOf(NewUi.walletColor1, NewUi.walletColor2),
+            colors = listOf(gradientStartColor, gradientEndColor),
         )
     }
 

feature/merchants/src/commonMain/kotlin/org/mifospay/feature/merchants/ui/MerchantTransferScreen.kt

@@ -40,7 +40,6 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
@@ -241,7 +240,7 @@ private fun MerchantBottomSheet(
                 ) {
                     Text(
                         stringResource(Res.string.feature_merchants_submit),
-                        color = Color.White,
+                        color = MaterialTheme.colorScheme.onPrimary,
                     )
                 }
             }
@@ -272,7 +271,7 @@ private fun MerchantInfo(
         Text(
             text = merchantVPA,
             style = MaterialTheme.typography.labelMedium,
-            color = Color.Gray,
+            color = MaterialTheme.colorScheme.outline,
         )
     }
 }
@@ -359,11 +358,13 @@ private fun SpecificTransactionItem(
                         green = 0f,
                         blue = 0f,
                     )
+
                     TransactionType.CREDIT -> MaterialTheme.colorScheme.onTertiaryContainer.copy(
                         red = 0f,
                         green = 0.51f,
                         blue = 0.21f,
                     )
+
                     TransactionType.OTHER -> MaterialTheme.colorScheme.primaryContainer.copy(
                         red = 1f,
                         green = 1f,

feature/profile/src/commonMain/kotlin/org/mifospay/feature/profile/components/ProfileImage.kt

@@ -28,7 +28,6 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
 import coil3.ImageLoader
@@ -167,7 +166,7 @@ fun EditableProfileImage(
                 .size(36.dp)
                 .clip(CircleShape)
                 .align(Alignment.BottomCenter),
-            colors = IconButtonDefaults.iconButtonColors(Color.White),
+            colors = IconButtonDefaults.iconButtonColors(MaterialTheme.colorScheme.surface),
         ) {
             Icon(
                 imageVector = MifosIcons.Edit2,

feature/savedcards/src/commonMain/kotlin/org/mifospay/feature/savedcards/components/CreditCard.kt

@@ -34,6 +34,7 @@ import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -54,18 +55,17 @@ import org.jetbrains.compose.resources.painterResource
 import org.mifospay.feature.savedcards.createOrUpdate.AECardState
 import org.mifospay.feature.savedcards.utils.CardMaskStyle
 import org.mifospay.feature.savedcards.utils.CardType
+import org.mifospay.feature.savedcards.utils.creditCardColors
 
 @Composable
 internal fun CreditCard(
     card: AECardState,
     modifier: Modifier = Modifier,
-    baseColor: Color = Color(0xFF1252C8),
+    baseColor: Color = creditCardColors.first(),
     bankCardAspectRatio: Float = 1.586f,
 ) {
     Card(
-        modifier = modifier
-            .fillMaxWidth()
-            .aspectRatio(bankCardAspectRatio),
+        modifier = modifier.fillMaxWidth().aspectRatio(bankCardAspectRatio),
         elevation = CardDefaults.cardElevation(defaultElevation = 16.dp),
     ) {
         Box {
@@ -82,7 +82,10 @@ internal fun CreditCard(
                 top = true,
                 left = true,
             ) {
-                CreditCardLabelAndText(label = "card holder", text = card.fullName)
+                CreditCardLabelAndText(
+                    label = "card holder",
+                    text = card.fullName,
+                )
             }
             // Positioned to corner bottom left
             SpaceWrapper(
@@ -97,7 +100,10 @@ internal fun CreditCard(
                         text = card.expiryDateFormatted,
                     )
                     Spacer(modifier = Modifier.width(16.dp))
-                    CreditCardLabelAndText(label = "cvv", text = card.maskedCVV)
+                    CreditCardLabelAndText(
+                        label = "cvv",
+                        text = card.maskedCVV,
+                    )
                 }
             }
             // Positioned to corner bottom right
@@ -130,8 +136,8 @@ private fun AnimatedCardNumberInput(
     cardNumber: String,
     cardType: CardType = CardType.detectCardType(cardNumber),
     maskStyle: CardMaskStyle = CardMaskStyle.ALL_EXCEPT_LAST_FOUR,
-    textColor: Color = Color.White,
-    dotColor: Color = Color.White,
+    textColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
+    dotColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
     modifier: Modifier = Modifier,
 ) {
     val groups = remember(cardNumber, cardType) {
@@ -163,9 +169,7 @@ private fun AnimatedCardNumberInput(
     }
 
     Box(
-        modifier = modifier
-            .fillMaxSize()
-            .padding(horizontal = 32.dp),
+        modifier = modifier.fillMaxSize().padding(horizontal = 32.dp),
         contentAlignment = Alignment.Center,
     ) {
         Row(
@@ -199,8 +203,8 @@ private fun AnimatedCVVInput(
     cvv: String,
     cardType: CardType = CardType.UNKNOWN,
     isVisible: Boolean = false,
-    textColor: Color = Color.White,
-    dotColor: Color = Color.White,
+    textColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
+    dotColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
     modifier: Modifier = Modifier,
 ) {
     val paddedCVV = remember(cvv, cardType) {
@@ -208,8 +212,7 @@ private fun AnimatedCVVInput(
     }
 
     Column(
-        modifier = Modifier
-            .wrapContentSize(),
+        modifier = Modifier.wrapContentSize(),
         verticalArrangement = Arrangement.SpaceBetween,
     ) {
         Text(
@@ -218,7 +221,7 @@ private fun AnimatedCVVInput(
                 fontWeight = FontWeight.W300,
                 fontSize = 12.sp,
                 letterSpacing = 1.sp,
-                color = Color.White,
+                color = MaterialTheme.colorScheme.surfaceContainerLowest,
             ),
         )
 
@@ -298,8 +301,7 @@ private fun DigitTransition(
     ) { show -> if (show) 0f else -8f }
 
     Canvas(
-        modifier = Modifier
-            .offset(x = (CardConfig.dotRadius.value * 2 + CardConfig.spaceBetweenDots.value) * index.dp)
+        modifier = Modifier.offset(x = (CardConfig.dotRadius.value * 2 + CardConfig.spaceBetweenDots.value) * index.dp)
             .graphicsLayer(alpha = dotAlpha),
     ) {
         drawCircle(
@@ -314,12 +316,10 @@ private fun DigitTransition(
             text = digit.toString(),
             color = textColor,
             style = TextStyle(fontSize = 20.sp),
-            modifier = Modifier
-                .offset(
-                    x = (CardConfig.dotRadius.value * 2 + CardConfig.spaceBetweenDots.value) * index.dp,
-                    y = slideOffset.dp,
-                )
-                .graphicsLayer(alpha = textAlpha),
+            modifier = Modifier.offset(
+                x = (CardConfig.dotRadius.value * 2 + CardConfig.spaceBetweenDots.value) * index.dp,
+                y = slideOffset.dp,
+            ).graphicsLayer(alpha = textAlpha),
         )
     }
 }
@@ -330,9 +330,7 @@ private fun CreditCardBackground(baseColor: Color) {
     val colorSaturation50 = baseColor.setSaturation(0.5f)
     // Drawing Shapes with Canvas
     Canvas(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(baseColor),
+        modifier = Modifier.fillMaxSize().background(baseColor),
     ) {
         // Drawing Circles
         drawCircle(
@@ -352,12 +350,11 @@ private fun CreditCardBackground(baseColor: Color) {
 private fun CreditCardLabelAndText(
     label: String,
     text: String,
-    labelColor: Color = Color.White,
-    textColor: Color = Color.White,
+    labelColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
+    textColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
 ) {
     Column(
-        modifier = Modifier
-            .wrapContentSize(),
+        modifier = Modifier.wrapContentSize(),
         verticalArrangement = Arrangement.SpaceBetween,
     ) {
         Text(
@@ -394,8 +391,7 @@ private fun SpaceWrapper(
 ) {
     Box(
         contentAlignment = Alignment.Center,
-        modifier = modifier
-            .then(if (top) Modifier.padding(top = space) else Modifier)
+        modifier = modifier.then(if (top) Modifier.padding(top = space) else Modifier)
             .then(if (right) Modifier.padding(end = space) else Modifier)
             .then(if (bottom) Modifier.padding(bottom = space) else Modifier)
             .then(if (left) Modifier.padding(start = space) else Modifier),
@@ -413,14 +409,12 @@ internal fun CreditCard(
     maskStyle: CardMaskStyle = CardMaskStyle.SHOW_FIRST_LAST_FOUR,
     modifier: Modifier = Modifier,
     cardType: CardType = CardType.detectCardType(cardNumber),
-    baseColor: Color = Color(0xFF1252C8),
+    baseColor: Color = creditCardColors.first(),
     bankCardAspectRatio: Float = 1.586f,
     onClick: () -> Unit,
 ) {
     Card(
-        modifier = modifier
-            .fillMaxWidth()
-            .aspectRatio(bankCardAspectRatio),
+        modifier = modifier.fillMaxWidth().aspectRatio(bankCardAspectRatio),
         elevation = CardDefaults.cardElevation(defaultElevation = 16.dp),
         onClick = onClick,
     ) {
@@ -430,7 +424,6 @@ internal fun CreditCard(
             DisplayCardNumberInput(
                 cardNumber = cardNumber,
                 maskStyle = maskStyle,
-                textColor = Color.White,
             )
             // Positioned to corner top left
             SpaceWrapper(
@@ -452,9 +445,15 @@ internal fun CreditCard(
                 left = true,
             ) {
                 Row {
-                    CreditCardLabelAndText(label = "expires", text = expiryDate)
+                    CreditCardLabelAndText(
+                        label = "expires",
+                        text = expiryDate,
+                    )
                     Spacer(modifier = Modifier.width(16.dp))
-                    CreditCardLabelAndText(label = "cvv", text = cvv)
+                    CreditCardLabelAndText(
+                        label = "cvv",
+                        text = cvv,
+                    )
                 }
             }
             // Positioned to corner bottom right
@@ -487,8 +486,8 @@ private fun DisplayCardNumberInput(
     cardNumber: String,
     cardType: CardType = CardType.detectCardType(cardNumber),
     maskStyle: CardMaskStyle = CardMaskStyle.ALL_EXCEPT_LAST_FOUR,
-    textColor: Color = Color.White,
-    dotColor: Color = Color.White,
+    textColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
+    dotColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
     modifier: Modifier = Modifier,
 ) {
     val groups = remember(cardNumber, cardType) {
@@ -524,9 +523,7 @@ private fun DisplayCardNumberInput(
     }
 
     Box(
-        modifier = modifier
-            .fillMaxSize()
-            .padding(horizontal = 32.dp),
+        modifier = modifier.fillMaxSize().padding(horizontal = 32.dp),
         contentAlignment = Alignment.Center,
     ) {
         Row(
@@ -585,12 +582,10 @@ private fun DisplayCardNumber(
                 } else {
                     // Show dot or bullet for masked digits
                     Box(
-                        modifier = Modifier
-                            .size(8.dp)
-                            .background(
-                                color = dotColor,
-                                shape = CircleShape,
-                            ),
+                        modifier = Modifier.size(8.dp).background(
+                            color = dotColor,
+                            shape = CircleShape,
+                        ),
                     )
                 }
             }

feature/savedcards/src/commonMain/kotlin/org/mifospay/feature/savedcards/createOrUpdate/AddEditCardScreen.kt

@@ -27,6 +27,7 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
@@ -328,7 +329,7 @@ fun ColorSelector(
     isSelected: Boolean,
     onColorSelected: () -> Unit,
 ) {
-    val borderColor = if (isSelected) Color.Black else Color.Transparent
+    val borderColor = if (isSelected) MaterialTheme.colorScheme.onSurface else Color.Transparent
     val borderWidth = if (isSelected) 2.dp else 0.dp
 
     Box(

feature/settings/src/commonMain/kotlin/org/mifospay/feature/settings/SettingsScreen.kt

@@ -154,7 +154,7 @@ private fun SettingsScreenContent(
             SettingsCardItem(
                 title = stringResource(Res.string.feature_settings_disable_account),
                 icon = MifosIcons.OutlinedLock,
-                color = Color.Red,
+                color = MaterialTheme.colorScheme.error,
                 onClick = {
                     onAction(SettingsAction.DisableAccount)
                 },

feature/standing-instruction/src/commonMain/kotlin/org/mifospay/feature/standing/instruction/components/InstructionTypeChip.kt

@@ -16,7 +16,6 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import org.mifospay.core.model.standinginstruction.StandingInstruction
 
@@ -26,9 +25,9 @@ fun InstructionTypeChip(
     modifier: Modifier = Modifier,
 ) {
     val (backgroundColor, contentColor) = when (type.id) {
-        1L -> Color(0xFFE3F2FD) to Color(0xFF1565C0)
-        2L -> Color(0xFFF3E5F5) to Color(0xFF7B1FA2)
-        else -> Color(0xFFF5F5F5) to Color(0xFF616161)
+        1L -> MaterialTheme.colorScheme.primaryContainer to MaterialTheme.colorScheme.onPrimaryContainer
+        2L -> MaterialTheme.colorScheme.tertiaryContainer to MaterialTheme.colorScheme.onTertiaryContainer
+        else -> MaterialTheme.colorScheme.surfaceVariant to MaterialTheme.colorScheme.onSurfaceVariant
     }
 
     Surface(

feature/standing-instruction/src/commonMain/kotlin/org/mifospay/feature/standing/instruction/components/PriorityChip.kt

@@ -16,7 +16,6 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import org.mifospay.core.model.standinginstruction.StandingInstruction
 
@@ -26,11 +25,11 @@ fun PriorityChip(
     modifier: Modifier = Modifier,
 ) {
     val (backgroundColor, contentColor) = when (priority.id) {
-        1L -> Color(0xFFFF4444) to Color.White
-        2L -> Color(0xFFFF8800) to Color.White
-        3L -> Color(0xFFFFBB33) to Color.Black
-        4L -> Color(0xFF99CC00) to Color.White
-        else -> Color.Gray to Color.White
+        1L -> MaterialTheme.colorScheme.error to MaterialTheme.colorScheme.surfaceContainerLowest
+        2L -> MaterialTheme.colorScheme.errorContainer to MaterialTheme.colorScheme.surfaceContainerLowest
+        3L -> MaterialTheme.colorScheme.secondary to MaterialTheme.colorScheme.surfaceContainerLowest
+        4L -> MaterialTheme.colorScheme.tertiary to MaterialTheme.colorScheme.surfaceContainerLowest
+        else -> MaterialTheme.colorScheme.outline to MaterialTheme.colorScheme.surfaceContainerLowest
     }
 
     Surface(

feature/upi-setup/src/commonMain/kotlin/org/mifospay/feature/upi/setup/screens/DebitCardScreenContent.kt

@@ -26,7 +26,6 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusDirection
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
@@ -74,8 +73,8 @@ internal fun DebitCardScreenContent(
             ),
             visualTransformation = ::formatCardNumber,
             colors = OutlinedTextFieldDefaults.colors(
-                focusedBorderColor = Color.DarkGray,
-                unfocusedBorderColor = Color.LightGray,
+                focusedBorderColor = MaterialTheme.colorScheme.outline,
+                unfocusedBorderColor = MaterialTheme.colorScheme.outlineVariant,
                 cursorColor = MaterialTheme.colorScheme.onSurface,
             ),
         )

feature/upi-setup/src/commonMain/kotlin/org/mifospay/feature/upi/setup/screens/UpiPinScreen.kt

@@ -32,7 +32,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.style.TextAlign
@@ -218,9 +217,9 @@ private fun UpiPinCharView(
         text = char,
         style = MaterialTheme.typography.headlineSmall,
         color = if (isFocused) {
-            Color.DarkGray
+            MaterialTheme.colorScheme.outline
         } else {
-            Color.LightGray
+            MaterialTheme.colorScheme.outlineVariant
         },
         textAlign = TextAlign.Center,
     )
@@ -229,7 +228,7 @@ private fun UpiPinCharView(
 @Preview
 @Composable
 private fun UpiScreenPreview() {
-    MifosTheme {
+    MifosTheme(darkTheme = true) {
         UpiPinScreen({}, verificationStatus = false, contentVisibility = true)
     }
 }