[Android][iOS] Design System Colors (#53)

Removes all legacy colors and updates to use the SpruceID color palette according to the latest Figma designs. It also adds all the colors described in the design system.
spruceid · Nov 20, 2024 · cf06fc4 · cf06fc4
1 parent 16ea625
commit cf06fc4
Show file tree

Hide file tree

Showing 24 changed files with 848 additions and 299 deletions.
diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/ErrorView.kt b/example/src/main/java/com/spruceid/mobilesdkexample/ErrorView.kt
@@ -39,7 +39,6 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.spruceid.mobilesdkexample.ui.theme.BorderSecondary
 import com.spruceid.mobilesdkexample.ui.theme.ColorRose600
 import com.spruceid.mobilesdkexample.ui.theme.ColorStone300
 import com.spruceid.mobilesdkexample.ui.theme.ColorStone50
@@ -112,7 +111,7 @@ fun ErrorView(
                     .navigationBarsPadding()
                     .border(
                         width = 1.dp,
-                        color = BorderSecondary,
+                        color = ColorStone300,
                         shape = RoundedCornerShape(6.dp)
                     )
             ) {
@@ -185,7 +184,7 @@ fun ErrorView(
                                     .fillMaxWidth()
                                     .border(
                                         width = 1.dp,
-                                        color = BorderSecondary,
+                                        color = ColorStone300,
                                         shape = RoundedCornerShape(6.dp)
                                     )
                                     .weight(1f)

diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/HomeView.kt b/example/src/main/java/com/spruceid/mobilesdkexample/HomeView.kt
@@ -33,7 +33,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.navigation.NavController
-import com.spruceid.mobilesdkexample.ui.theme.Bg
+import com.spruceid.mobilesdkexample.ui.theme.ColorBase1
 import com.spruceid.mobilesdkexample.ui.theme.ColorBlue300
 import com.spruceid.mobilesdkexample.ui.theme.ColorBlue500
 import com.spruceid.mobilesdkexample.ui.theme.ColorBlue900
@@ -93,7 +93,7 @@ fun HomeBottomTabs(
     tab: HomeTabs,
     changeTabs: (HomeTabs) -> Unit
 ) {
-    BottomAppBar(containerColor = Bg) {
+    BottomAppBar(containerColor = ColorBase1) {
         Row(
             modifier = Modifier.fillMaxWidth(),
             horizontalArrangement = Arrangement.Center

diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/Loader.kt b/example/src/main/java/com/spruceid/mobilesdkexample/Loader.kt
@@ -26,9 +26,9 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.spruceid.mobilesdkexample.ui.theme.ColorBase150
+import com.spruceid.mobilesdkexample.ui.theme.ColorBlue600
 import com.spruceid.mobilesdkexample.ui.theme.MobileSdkTheme
-import com.spruceid.mobilesdkexample.ui.theme.Primary
-import com.spruceid.mobilesdkexample.ui.theme.SpruceBlue
 
 @Composable
 fun Loader() {
@@ -57,7 +57,7 @@ fun Indicator(
     size: Dp = 107.dp,
     // angle (length) of indicator arc
     sweepAngle: Float = 90f,
-    color: Color = Primary,
+    color: Color = ColorBase150,
     strokeWidth: Dp = 6.dp,
 ) {
     val transition = rememberInfiniteTransition("Infinite loader indicator")
@@ -88,7 +88,7 @@ fun Indicator(
             .size(size)
             .padding(strokeWidth / 2),
     ) {
-        drawCircle(SpruceBlue, style = stroke)
+        drawCircle(ColorBlue600, style = stroke)
         drawArc(
             color,
             // arc start angle

diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/LoadingView.kt b/example/src/main/java/com/spruceid/mobilesdkexample/LoadingView.kt
@@ -22,8 +22,8 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.viewinterop.AndroidView
 import app.rive.runtime.kotlin.RiveAnimationView
-import com.spruceid.mobilesdkexample.ui.theme.CodeBorder
 import com.spruceid.mobilesdkexample.ui.theme.ColorBase800
+import com.spruceid.mobilesdkexample.ui.theme.ColorStone300
 import com.spruceid.mobilesdkexample.ui.theme.Inter
 
 @Composable
@@ -34,10 +34,10 @@ fun LoadingView(
 ) {
     Box(
         modifier = Modifier
-        .fillMaxSize()
-        .padding(vertical = 40.dp)
-        .padding(horizontal = 30.dp)
-        .navigationBarsPadding()
+            .fillMaxSize()
+            .padding(vertical = 40.dp)
+            .padding(horizontal = 30.dp)
+            .navigationBarsPadding()
     ) {
         Column(
             modifier = Modifier.fillMaxSize(),
@@ -78,7 +78,7 @@ fun LoadingView(
                         containerColor = Color.Transparent,
                         contentColor = Color.Black,
                     ),
-                    border = BorderStroke(1.dp, CodeBorder),
+                    border = BorderStroke(1.dp, ColorStone300),
                     modifier = Modifier
                         .fillMaxWidth()
                 ) {

diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/MainActivity.kt b/example/src/main/java/com/spruceid/mobilesdkexample/MainActivity.kt
@@ -16,7 +16,7 @@ import com.spruceid.mobilesdkexample.db.AppDatabase
 import com.spruceid.mobilesdkexample.db.VerificationMethodsRepository
 import com.spruceid.mobilesdkexample.navigation.Screen
 import com.spruceid.mobilesdkexample.navigation.SetupNavGraph
-import com.spruceid.mobilesdkexample.ui.theme.Bg
+import com.spruceid.mobilesdkexample.ui.theme.ColorBase1
 import com.spruceid.mobilesdkexample.ui.theme.MobileSdkTheme
 import com.spruceid.mobilesdkexample.viewmodels.CredentialPacksViewModel
 import com.spruceid.mobilesdkexample.viewmodels.CredentialPacksViewModelFactory
@@ -36,13 +36,13 @@ class MainActivity : ComponentActivity() {
                     )
                 )
             } else if (intent.data!!.toString().startsWith("openid4vp")) {
-                    navController.navigate(
-                        Screen.HandleOID4VP.route.replace(
-                            "{url}",
-                            intent.data.toString().replace("openid4vp://", "")
-                        )
+                navController.navigate(
+                    Screen.HandleOID4VP.route.replace(
+                        "{url}",
+                        intent.data.toString().replace("openid4vp://", "")
                     )
-                }
+                )
+            }
         } else {
             super.onNewIntent(intent)
         }
@@ -57,7 +57,7 @@ class MainActivity : ComponentActivity() {
                 Surface(
                     modifier = Modifier
                         .fillMaxSize(),
-                    color = Bg,
+                    color = ColorBase1,
                 ) {
                     navController = rememberNavController()
 
@@ -67,9 +67,9 @@ class MainActivity : ComponentActivity() {
                     //    RawCredentialsViewModelFactory((application as MainApplication).rawCredentialsRepository)
                     // }
 
-                     val verificationMethodsViewModel: VerificationMethodsViewModel by viewModels {
+                    val verificationMethodsViewModel: VerificationMethodsViewModel by viewModels {
                         VerificationMethodsViewModelFactory((application as MainApplication).verificationMethodsRepository)
-                     }
+                    }
 
                     val credentialPacksViewModel: CredentialPacksViewModel by viewModels {
                         CredentialPacksViewModelFactory(application as MainApplication)

diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/ScanningComponent.kt b/example/src/main/java/com/spruceid/mobilesdkexample/ScanningComponent.kt
@@ -31,8 +31,8 @@ import com.google.accompanist.permissions.rememberMultiplePermissionsState
 import com.spruceid.mobile.sdk.ui.MRZScanner
 import com.spruceid.mobile.sdk.ui.PDF417Scanner
 import com.spruceid.mobile.sdk.ui.QRCodeScanner
+import com.spruceid.mobilesdkexample.ui.theme.ColorBase150
 import com.spruceid.mobilesdkexample.ui.theme.Inter
-import com.spruceid.mobilesdkexample.ui.theme.Primary
 
 enum class ScanningType {
     QRCODE, PDF417, MRZ
@@ -154,7 +154,7 @@ fun ScanningComponent(
                         },
                         colors =
                         ButtonDefaults.buttonColors(
-                            containerColor = Primary,
+                            containerColor = ColorBase150,
                             contentColor = Color.White,
                         ),
                         modifier =
@@ -177,15 +177,15 @@ fun ScanningComponent(
                         colors =
                         ButtonDefaults.buttonColors(
                             containerColor = Color.Transparent,
-                            contentColor = Primary,
+                            contentColor = ColorBase150,
                         ),
                     ) {
                         Text(
                             text = "Cancel",
                             fontFamily = Inter,
                             fontWeight = FontWeight.SemiBold,
                             fontSize = 16.sp,
-                            color = Primary,
+                            color = ColorBase150,
                         )
                     }
                 },

diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/credentials/AchievementCredentialItem.kt b/example/src/main/java/com/spruceid/mobilesdkexample/credentials/AchievementCredentialItem.kt
@@ -46,13 +46,13 @@ import com.spruceid.mobile.sdk.ui.CardRenderingDetailsView
 import com.spruceid.mobile.sdk.ui.CardRenderingListView
 import com.spruceid.mobile.sdk.ui.toCardRendering
 import com.spruceid.mobilesdkexample.R
-import com.spruceid.mobilesdkexample.ui.theme.Bg
-import com.spruceid.mobilesdkexample.ui.theme.CredentialBorder
+import com.spruceid.mobilesdkexample.ui.theme.ColorBase1
+import com.spruceid.mobilesdkexample.ui.theme.ColorBase300
+import com.spruceid.mobilesdkexample.ui.theme.ColorBlue600
+import com.spruceid.mobilesdkexample.ui.theme.ColorRose600
+import com.spruceid.mobilesdkexample.ui.theme.ColorStone600
+import com.spruceid.mobilesdkexample.ui.theme.ColorStone950
 import com.spruceid.mobilesdkexample.ui.theme.Inter
-import com.spruceid.mobilesdkexample.ui.theme.SecondaryButtonRed
-import com.spruceid.mobilesdkexample.ui.theme.SpruceBlue
-import com.spruceid.mobilesdkexample.ui.theme.TextBody
-import com.spruceid.mobilesdkexample.ui.theme.TextHeader
 import com.spruceid.mobilesdkexample.utils.addCredential
 import com.spruceid.mobilesdkexample.utils.splitCamelCase
 import kotlinx.coroutines.launch
@@ -112,7 +112,7 @@ class AchievementCredentialItem : ICredentialView {
                 fontFamily = Inter,
                 fontWeight = FontWeight.Normal,
                 fontSize = 14.sp,
-                color = TextBody
+                color = ColorStone600
             )
             Spacer(modifier = Modifier.height(16.dp))
         }
@@ -160,7 +160,7 @@ class AchievementCredentialItem : ICredentialView {
                     fontFamily = Inter,
                     fontWeight = FontWeight.Medium,
                     fontSize = 20.sp,
-                    color = TextHeader,
+                    color = ColorStone950,
                     modifier = Modifier.padding(bottom = 8.dp)
                 )
             },
@@ -240,7 +240,7 @@ class AchievementCredentialItem : ICredentialView {
                         fontFamily = Inter,
                         fontWeight = FontWeight.Medium,
                         fontSize = 20.sp,
-                        color = TextHeader,
+                        color = ColorStone950,
                         modifier = Modifier.padding(bottom = 8.dp)
                     )
                 }
@@ -270,7 +270,7 @@ class AchievementCredentialItem : ICredentialView {
                     fontFamily = Inter,
                     fontWeight = FontWeight.Normal,
                     fontSize = 12.sp,
-                    color = TextHeader,
+                    color = ColorStone950,
                     modifier = Modifier
                         .fillMaxWidth()
                 )
@@ -282,7 +282,7 @@ class AchievementCredentialItem : ICredentialView {
                     shape = RoundedCornerShape(5.dp),
                     colors = ButtonDefaults.buttonColors(
                         containerColor = Color.Transparent,
-                        contentColor = SecondaryButtonRed,
+                        contentColor = ColorRose600,
                     ),
                     modifier = Modifier
                         .fillMaxWidth()
@@ -291,7 +291,7 @@ class AchievementCredentialItem : ICredentialView {
                         text = "Delete",
                         fontFamily = Inter,
                         fontWeight = FontWeight.Normal,
-                        color = SecondaryButtonRed,
+                        color = ColorRose600,
                     )
                 }
 
@@ -306,7 +306,7 @@ class AchievementCredentialItem : ICredentialView {
                     shape = RoundedCornerShape(5.dp),
                     colors = ButtonDefaults.buttonColors(
                         containerColor = Color.Transparent,
-                        contentColor = SpruceBlue,
+                        contentColor = ColorBlue600,
                     ),
                     modifier = Modifier
                         .fillMaxWidth()
@@ -315,7 +315,7 @@ class AchievementCredentialItem : ICredentialView {
                         text = "Cancel",
                         fontFamily = Inter,
                         fontWeight = FontWeight.Bold,
-                        color = SpruceBlue,
+                        color = ColorBlue600,
                     )
                 }
             }
@@ -329,7 +329,7 @@ class AchievementCredentialItem : ICredentialView {
                 .padding(vertical = 10.dp)
                 .border(
                     width = 1.dp,
-                    color = CredentialBorder,
+                    color = ColorBase300,
                     shape = RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp)
                 )
                 .padding(12.dp)
@@ -349,7 +349,7 @@ class AchievementCredentialItem : ICredentialView {
                 .padding(vertical = 10.dp)
                 .border(
                     width = 1.dp,
-                    color = CredentialBorder,
+                    color = ColorBase300,
                     shape = RoundedCornerShape(8.dp)
                 )
                 .padding(12.dp)
@@ -408,7 +408,7 @@ class AchievementCredentialItem : ICredentialView {
                                         fontFamily = Inter,
                                         fontWeight = FontWeight.Normal,
                                         fontSize = 14.sp,
-                                        color = TextBody,
+                                        color = ColorStone600,
                                         modifier = Modifier.padding(top = 10.dp)
                                     )
                                     Text(
@@ -459,7 +459,7 @@ class AchievementCredentialItem : ICredentialView {
 
                     .nestedScroll(rememberNestedScrollInteropConnection()),
                 sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
-                containerColor = Bg,
+                containerColor = ColorBase1,
                 shape = RoundedCornerShape(8.dp)
             ) {
                 Column(
@@ -473,7 +473,7 @@ class AchievementCredentialItem : ICredentialView {
                         fontFamily = Inter,
                         fontWeight = FontWeight.Bold,
                         fontSize = 24.sp,
-                        color = TextHeader,
+                        color = ColorStone950,
                         modifier = Modifier
                             .fillMaxWidth()
                     )

diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/credentials/AddToWalletView.kt b/example/src/main/java/com/spruceid/mobilesdkexample/credentials/AddToWalletView.kt
@@ -27,10 +27,10 @@ import com.spruceid.mobile.sdk.CredentialPack
 import com.spruceid.mobilesdkexample.ErrorView
 import com.spruceid.mobilesdkexample.LoadingView
 import com.spruceid.mobilesdkexample.navigation.Screen
-import com.spruceid.mobilesdkexample.ui.theme.CTAButtonGreen
+import com.spruceid.mobilesdkexample.ui.theme.ColorEmerald700
+import com.spruceid.mobilesdkexample.ui.theme.ColorRose600
+import com.spruceid.mobilesdkexample.ui.theme.ColorStone950
 import com.spruceid.mobilesdkexample.ui.theme.Inter
-import com.spruceid.mobilesdkexample.ui.theme.SecondaryButtonRed
-import com.spruceid.mobilesdkexample.ui.theme.TextHeader
 import com.spruceid.mobilesdkexample.utils.credentialDisplaySelector
 import com.spruceid.mobilesdkexample.viewmodels.CredentialPacksViewModel
 import kotlinx.coroutines.Dispatchers
@@ -106,7 +106,7 @@ fun AddToWalletView(
                 fontFamily = Inter,
                 fontWeight = FontWeight.Bold,
                 fontSize = 24.sp,
-                color = TextHeader,
+                color = ColorStone950,
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(vertical = 20.dp),
@@ -128,7 +128,7 @@ fun AddToWalletView(
                 },
                 shape = RoundedCornerShape(5.dp),
                 colors = ButtonDefaults.buttonColors(
-                    containerColor = CTAButtonGreen,
+                    containerColor = ColorEmerald700,
                     contentColor = Color.White,
                 ),
                 modifier = Modifier
@@ -149,7 +149,7 @@ fun AddToWalletView(
                 shape = RoundedCornerShape(5.dp),
                 colors = ButtonDefaults.buttonColors(
                     containerColor = Color.Transparent,
-                    contentColor = SecondaryButtonRed,
+                    contentColor = ColorRose600,
                 ),
                 modifier = Modifier
                     .fillMaxWidth()
@@ -158,7 +158,7 @@ fun AddToWalletView(
                     text = "Close",
                     fontFamily = Inter,
                     fontWeight = FontWeight.SemiBold,
-                    color = SecondaryButtonRed,
+                    color = ColorRose600,
                 )
             }
         }