From 6da72a6ba7f42465d1a2b4ae6a978964f073a44f Mon Sep 17 00:00:00 2001
From: Larry Ng <lng@stripe.com>
Date: Fri, 13 Dec 2024 15:35:32 -0500
Subject: [PATCH] add light/dark theme example

---
 .../example/ui/appearance/AppearanceInfo.kt   | 50 ++++++++++++
 .../common/BasicExampleComponentActivity.kt   | 19 ++++-
 .../src/main/res/values-night/colors.xml      | 81 +++++++++++++++++++
 .../src/main/res/values/colors.xml            | 28 ++++++-
 .../src/main/res/values/strings.xml           |  1 +
 5 files changed, 176 insertions(+), 3 deletions(-)
 create mode 100644 connect-example/src/main/res/values-night/colors.xml

diff --git a/connect-example/src/main/java/com/stripe/android/connect/example/ui/appearance/AppearanceInfo.kt b/connect-example/src/main/java/com/stripe/android/connect/example/ui/appearance/AppearanceInfo.kt
index 7a2e4d57b4c..980153ad3dd 100644
--- a/connect-example/src/main/java/com/stripe/android/connect/example/ui/appearance/AppearanceInfo.kt
+++ b/connect-example/src/main/java/com/stripe/android/connect/example/ui/appearance/AppearanceInfo.kt
@@ -27,6 +27,7 @@ data class AppearanceInfo(
         HotDog(R.string.appearance_hot_dog),
         OceanBreeze(R.string.appearance_ocean_breeze),
         Link(R.string.appearance_link),
+        Dynamic(R.string.appearance_dynamic),
         CustomFont(R.string.custom_font)
     }
 
@@ -38,6 +39,7 @@ data class AppearanceInfo(
                 AppearanceId.HotDog -> hotDogAppearance(context)
                 AppearanceId.OceanBreeze -> oceanBreezeAppearance(context)
                 AppearanceId.Link -> linkAppearance(context)
+                AppearanceId.Dynamic -> dynamicAppearance(context)
                 AppearanceId.CustomFont -> customFont()
             }
         }
@@ -148,6 +150,54 @@ data class AppearanceInfo(
             )
         )
 
+        private fun dynamicAppearance(context: Context) = AppearanceInfo(
+            appearanceId = AppearanceId.Dynamic,
+            appearance = Appearance(
+                colors = Colors(
+                    primary = ContextCompat.getColor(context, R.color.dynamic_colors_primary),
+                    text = ContextCompat.getColor(context, R.color.dynamic_colors_text),
+                    background = ContextCompat.getColor(context, R.color.dynamic_colors_background),
+                    border = ContextCompat.getColor(context, R.color.dynamic_colors_border),
+                    secondaryText = ContextCompat.getColor(context, R.color.dynamic_colors_secondary_text),
+                    actionPrimaryText = ContextCompat.getColor(context, R.color.dynamic_colors_action_primary_text),
+                    actionSecondaryText = ContextCompat.getColor(context, R.color.dynamic_colors_action_secondary_text),
+                    formAccent = ContextCompat.getColor(context, R.color.dynamic_colors_form_accent),
+                    formHighlightBorder = ContextCompat.getColor(context, R.color.dynamic_colors_form_highlight_border),
+                    danger = ContextCompat.getColor(context, R.color.dynamic_colors_danger),
+                    offsetBackground = ContextCompat.getColor(context, R.color.dynamic_colors_offset_background),
+                ),
+                buttonPrimary = Button(
+                    colorBackground = ContextCompat.getColor(context, R.color.dynamic_colors_button_primary_background),
+                    colorBorder = ContextCompat.getColor(context, R.color.dynamic_colors_button_primary_border),
+                    colorText = ContextCompat.getColor(context, R.color.dynamic_colors_button_primary_text)
+                ),
+                buttonSecondary = Button(
+                    colorBackground = ContextCompat.getColor(
+                        context,
+                        R.color.dynamic_colors_button_secondary_background
+                    ),
+                    colorBorder = ContextCompat.getColor(context, R.color.dynamic_colors_button_secondary_border),
+                    colorText = ContextCompat.getColor(context, R.color.dynamic_colors_button_secondary_text)
+                ),
+                badgeSuccess = Badge(
+                    colorBorder = ContextCompat.getColor(context, R.color.dynamic_colors_badge_success_border),
+                    colorText = ContextCompat.getColor(context, R.color.dynamic_colors_badge_success_text)
+                ),
+                badgeNeutral = Badge(
+                    colorBorder = ContextCompat.getColor(context, R.color.dynamic_colors_badge_neutral_border),
+                    colorText = ContextCompat.getColor(context, R.color.dynamic_colors_badge_neutral_text),
+                ),
+                badgeWarning = Badge(
+                    colorBorder = ContextCompat.getColor(context, R.color.dynamic_colors_badge_warning_border),
+                    colorText = ContextCompat.getColor(context, R.color.dynamic_colors_badge_warning_text)
+                ),
+                badgeDanger = Badge(
+                    colorBorder = ContextCompat.getColor(context, R.color.dynamic_colors_badge_danger_border),
+                    colorText = ContextCompat.getColor(context, R.color.dynamic_colors_badge_danger_text)
+                ),
+            )
+        )
+
         private fun customFont() = AppearanceInfo(
             appearanceId = AppearanceId.Link,
             appearance = Appearance(
diff --git a/connect-example/src/main/java/com/stripe/android/connect/example/ui/common/BasicExampleComponentActivity.kt b/connect-example/src/main/java/com/stripe/android/connect/example/ui/common/BasicExampleComponentActivity.kt
index bfc21324b52..09bb80acfc4 100644
--- a/connect-example/src/main/java/com/stripe/android/connect/example/ui/common/BasicExampleComponentActivity.kt
+++ b/connect-example/src/main/java/com/stripe/android/connect/example/ui/common/BasicExampleComponentActivity.kt
@@ -12,10 +12,12 @@ import androidx.compose.material.ModalBottomSheetLayout
 import androidx.compose.material.ModalBottomSheetValue
 import androidx.compose.material.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.fragment.app.FragmentActivity
@@ -27,6 +29,8 @@ import com.stripe.android.connect.EmbeddedComponentManager
 import com.stripe.android.connect.PrivateBetaConnectSDK
 import com.stripe.android.connect.example.core.Success
 import com.stripe.android.connect.example.core.then
+import com.stripe.android.connect.example.data.SettingsService
+import com.stripe.android.connect.example.ui.appearance.AppearanceInfo
 import com.stripe.android.connect.example.ui.appearance.AppearanceView
 import com.stripe.android.connect.example.ui.appearance.AppearanceViewModel
 import com.stripe.android.connect.example.ui.embeddedcomponentmanagerloader.EmbeddedComponentLoaderViewModel
@@ -34,6 +38,7 @@ import com.stripe.android.connect.example.ui.embeddedcomponentmanagerloader.Embe
 import com.stripe.android.connect.example.ui.settings.settingsComposables
 import dagger.hilt.android.AndroidEntryPoint
 import kotlinx.coroutines.launch
+import javax.inject.Inject
 
 @Suppress("ConstPropertyName")
 private object BasicComponentExampleDestination {
@@ -50,6 +55,9 @@ abstract class BasicExampleComponentActivity : FragmentActivity() {
 
     abstract fun createComponentView(context: Context, embeddedComponentManager: EmbeddedComponentManager): View
 
+    @Inject
+    lateinit var settingsService: SettingsService
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
@@ -117,8 +125,15 @@ abstract class BasicExampleComponentActivity : FragmentActivity() {
                     openSettings = openSettings,
                     reload = viewModel::reload,
                 ) { embeddedComponentManager ->
-                    AndroidView(modifier = Modifier.fillMaxSize(), factory = { context ->
-                        createComponentView(context, embeddedComponentManager)
+                    val context = LocalContext.current
+                    LaunchedEffect(context) {
+                        val appearanceInfo = settingsService.getAppearanceId()
+                            ?.let { AppearanceInfo.getAppearance(it, context).appearance }
+                            ?: return@LaunchedEffect
+                        embeddedComponentManager.update(appearanceInfo)
+                    }
+                    AndroidView(modifier = Modifier.fillMaxSize(), factory = {
+                        createComponentView(it, embeddedComponentManager)
                     })
                 }
             }
diff --git a/connect-example/src/main/res/values-night/colors.xml b/connect-example/src/main/res/values-night/colors.xml
new file mode 100644
index 00000000000..105ad808372
--- /dev/null
+++ b/connect-example/src/main/res/values-night/colors.xml
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="default_border_color">#FBD992</color>
+    <color name="default_background_color">#FCEEB5</color>
+    <color name="default_text_color">#B13600</color>
+
+    <!-- Ogre Theme Colors -->
+    <color name="ogre_primary">#5AE92B</color>
+    <color name="ogre_background">#837411</color>
+    <color name="ogre_button_primary_background">#DAB9B9</color>
+    <color name="ogre_button_primary_border">#F00000</color>
+    <color name="ogre_button_primary_text">#000000</color>
+    <color name="ogre_button_secondary_background">#025F08</color>
+    <color name="ogre_text">#554125</color>
+    <color name="ogre_badge_neutral_text">#28D72A</color>
+    <color name="ogre_badge_neutral_background">#638863</color>
+    <color name="ogre_button_secondary_text">#000000</color>
+
+    <!-- Hot Dog Theme Colors -->
+    <color name="hot_dog_primary">#FF2200</color>
+    <color name="hot_dog_background">#FFFF00</color>
+    <color name="hot_dog_button_secondary_background">#C6C6C6</color>
+    <color name="hot_dog_button_secondary_border">#1F1F1F</color>
+    <color name="hot_dog_button_primary_border">#1F1F1F</color>
+    <color name="hot_dog_button_primary_text">#1F1F1F</color>
+    <color name="hot_dog_button_primary_background">#C6C6C6</color>
+    <color name="hot_dog_offset_background">#FF2200</color>
+    <color name="hot_dog_text">#000000</color>
+    <color name="hot_dog_secondary_text">#000000</color>
+    <color name="hot_dog_badge_danger_text">#991400</color>
+    <color name="hot_dog_badge_warning_background">#F9A443</color>
+
+    <!-- Ocean Breeze Theme Colors -->
+    <color name="ocean_breeze_background">#EAF6FB</color>
+    <color name="ocean_breeze_primary">#15609E</color>
+    <color name="ocean_breeze_badge_success_text">#2A6093</color>
+    <color name="ocean_breeze_badge_neutral_text">#5A621D</color>
+    <color name="ocean_breeze_button_secondary_text">#2C93E8</color>
+    <color name="ocean_breeze_button_secondary_border">#2C93E8</color>
+
+    <!-- Link Theme Colors -->
+    <color name="link_primary">#1C3944</color>
+    <color name="link_button_primary_background">#33DCB3</color>
+    <color name="link_button_primary_border">#33DCB3</color>
+    <color name="link_button_primary_text">#1C3944</color>
+    <color name="link_secondary_text">#485B61</color>
+    <color name="link_text">#1C3944</color>
+    <color name="link_action_primary_text">#33DCB3</color>
+    <color name="link_badge_success_background">#B4FEE1</color>
+    <color name="link_badge_success_border">#C0D7CD</color>
+    <color name="link_badge_success_text">#1C3944</color>
+    <color name="link_badge_neutral_background">#DEFECC</color>
+    <color name="link_badge_neutral_text">#1C3944</color>
+
+    <!-- Dynamic Colors Theme -->
+    <color name="dynamic_colors_primary">#EBF0F4</color>
+    <color name="dynamic_colors_text">#FFFFFF</color>
+    <color name="dynamic_colors_background">#272626</color>
+    <color name="dynamic_colors_button_primary_background">#077EDF</color>
+    <color name="dynamic_colors_button_primary_border">#077EDF</color>
+    <color name="dynamic_colors_button_primary_text">#FFFFFF</color>
+    <color name="dynamic_colors_button_secondary_background">#3D4042</color>
+    <color name="dynamic_colors_button_secondary_border">#89969F</color>
+    <color name="dynamic_colors_button_secondary_text">#FFFFFF</color>
+    <color name="dynamic_colors_border">#3D3D3D</color>
+    <color name="dynamic_colors_secondary_text">#F4F3F3</color>
+    <color name="dynamic_colors_action_primary_text">#EBF0F4</color>
+    <color name="dynamic_colors_action_secondary_text">#F7F7F7</color>
+    <color name="dynamic_colors_form_accent">#EBF0F4</color>
+    <color name="dynamic_colors_form_highlight_border">#363636</color>
+    <color name="dynamic_colors_danger">#DF1B41</color>
+    <color name="dynamic_colors_badge_neutral_border">#7D7F87</color>
+    <color name="dynamic_colors_badge_neutral_text">#D1D3DC</color>
+    <color name="dynamic_colors_badge_success_border">#7A8C7B</color>
+    <color name="dynamic_colors_badge_success_text">#CFE3D0</color>
+    <color name="dynamic_colors_badge_warning_border">#794A00</color>
+    <color name="dynamic_colors_badge_warning_text">#E7A288</color>
+    <color name="dynamic_colors_badge_danger_border">#6F2341</color>
+    <color name="dynamic_colors_badge_danger_text">#EC93AF</color>
+    <color name="dynamic_colors_offset_background">#171717</color>
+</resources>
diff --git a/connect-example/src/main/res/values/colors.xml b/connect-example/src/main/res/values/colors.xml
index c41c17c64a7..8cc259888d7 100644
--- a/connect-example/src/main/res/values/colors.xml
+++ b/connect-example/src/main/res/values/colors.xml
@@ -52,4 +52,30 @@
     <color name="link_badge_neutral_background">#DEFECC</color>
     <color name="link_badge_neutral_text">#1C3944</color>
 
-</resources>
\ No newline at end of file
+    <!-- Dynamic Colors Theme -->
+    <color name="dynamic_colors_primary">#0969DA</color>
+    <color name="dynamic_colors_text">#24292F</color>
+    <color name="dynamic_colors_background">#FFFFFF</color>
+    <color name="dynamic_colors_button_primary_background">#0969DA</color>
+    <color name="dynamic_colors_button_primary_border">#261B1F24</color>
+    <color name="dynamic_colors_button_primary_text">#FFFFFF</color>
+    <color name="dynamic_colors_button_secondary_background">#F6F8FA</color>
+    <color name="dynamic_colors_button_secondary_border">#261B1F24</color>
+    <color name="dynamic_colors_button_secondary_text">#24292F</color>
+    <color name="dynamic_colors_border">#D7D7D7</color>
+    <color name="dynamic_colors_secondary_text">#57606A</color>
+    <color name="dynamic_colors_action_primary_text">#0969DA</color>
+    <color name="dynamic_colors_action_secondary_text">#6E7781</color>
+    <color name="dynamic_colors_form_accent">#0969DA</color>
+    <color name="dynamic_colors_form_highlight_border">#0969DA</color>
+    <color name="dynamic_colors_danger">#B35900</color>
+    <color name="dynamic_colors_badge_neutral_border">#8C959F</color>
+    <color name="dynamic_colors_badge_neutral_text">#6E7781</color>
+    <color name="dynamic_colors_badge_success_border">#218BFF</color>
+    <color name="dynamic_colors_badge_success_text">#0969DA</color>
+    <color name="dynamic_colors_badge_warning_border">#D4A72C</color>
+    <color name="dynamic_colors_badge_warning_text">#BF8700</color>
+    <color name="dynamic_colors_badge_danger_border">#DD7815</color>
+    <color name="dynamic_colors_badge_danger_text">#B35900</color>
+    <color name="dynamic_colors_offset_background">#F8F8F8</color>
+</resources>
diff --git a/connect-example/src/main/res/values/strings.xml b/connect-example/src/main/res/values/strings.xml
index 3185af36cc5..f637110537c 100644
--- a/connect-example/src/main/res/values/strings.xml
+++ b/connect-example/src/main/res/values/strings.xml
@@ -44,5 +44,6 @@
     <string name="appearance_hot_dog">Hot Dog Stand</string>
     <string name="appearance_ocean_breeze">Ocean Breeze</string>
     <string name="appearance_link">Link</string>
+    <string name="appearance_dynamic">Dynamic</string>
     <string name="custom_font">Custom Font</string>
 </resources>