[#50] Preliminary design guide

Known issues
 - We cannot use downloadable fonts with Compose, so the fonts must be embedded with the app

Questions
 - How does the transparent button show a disabled state?
 - Are the navigation buttons and secondary buttons supposed to be effectively the same style but one is smaller?

TODO
 - Add gradients.  Gradients are not implemented for background, progress bar, etc.  Currently they simply use the start color for the gradient
 - Icons are using Material Icons, pending decision on how to leverage the vectors in the design
 - Add the border for hero images
 - Add shapes for the callout, which is currently square
 - Add padding
 - Add drop shadows
 - Double-check colors for correctness

.gitignore

@@ -18,3 +18,5 @@ local.properties
 /.idea/deploymentTargetDropDown.xml
 *.hprof
 /.idea/artifacts
+/.idea/assetWizardSettings.xml
+/.idea/inspectionProfiles/Project_Default.xml

README.md

@@ -34,4 +34,5 @@ If you plan to fork the project to create a new app of your own, please make the
 1. During builds, a warning will be printed that says "Unable to detect AGP versions for included builds. All projects in the build should use the same AGP version."  This can be safely ignored.  The version under build-conventions is the same as the version used elsewhere in the application.
 1. When the code coverage Gradle property `IS_COVERAGE_ENABLED` is enabled, the debug app APK cannot be run.  The coverage flag should therefore only be set when running automated tests.
 1. Test coverage for Compose code will be low, due to [known limitations](https://github.com/jacoco/jacoco/issues/1208) in the interaction between Compose and Jacoco.
-1. Adding the `espresso-contrib` dependency will cause builds to fail, due to conflicting classes.  This is a [known issue](https://github.com/zcash/zcash-android-wallet-sdk/issues/306) with the Zcash Android SDK.
+1. Adding the `espresso-contrib` dependency will cause builds to fail, due to conflicting classes.  This is a [known issue](https://github.com/zcash/zcash-android-wallet-sdk/issues/306) with the Zcash Android SDK.
+1. Android Studio will warn about the Gradle checksum.  This is a [known issue](https://github.com/gradle/gradle/issues/9361) and can be safely ignored.

build.gradle.kts

@@ -124,4 +124,4 @@ fun com.android.build.gradle.BaseExtension.configureBaseExtension() {
             execution = "ANDROIDX_TEST_ORCHESTRATOR"
         }
     }
-}
+}

docs/Third party licenses.md

@@ -0,0 +1,9 @@
+# Third Party Licenses
+
+The majority of the contents of this Git repository are covered under the [LICENSE](../LICENSE).  However certain items, as described below, are under different license.
+
+## Electric Coin Company copyrights trademarks
+
+
+## Rubik Font
+The fonts under the [font](../ui-lib/src/main/res/ui/common/font) directory are downloaded from [Google Fonts](https://fonts.google.com/specimen/Rubik) and are licensed under the [Open Font License](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL).

settings.gradle.kts

@@ -78,6 +78,7 @@ dependencyResolutionManagement {
             alias("androidx-compose-foundation").to("androidx.compose.foundation:foundation:$androidxComposeVersion")
             alias("androidx-compose-material").to("androidx.compose.material:material:$androidxComposeVersion")
             alias("androidx-compose-material-icons-core").to("androidx.compose.material:material-icons-core:$androidxComposeVersion")
+            alias("androidx-compose-material-icons-extended").to("androidx.compose.material:material-icons-extended:$androidxComposeVersion")
             alias("androidx-compose-tooling").to("androidx.compose.ui:ui-tooling:$androidxComposeVersion")
             alias("androidx-compose-ui").to("androidx.compose.ui:ui:$androidxComposeVersion")
             alias("androidx-compose-compiler").to("androidx.compose.compiler:compiler:$androidxComposeCompilerVersion")
@@ -113,6 +114,7 @@ dependencyResolutionManagement {
                     "androidx-compose-foundation",
                     "androidx-compose-material",
                     "androidx-compose-material-icons-core",
+                    "androidx-compose-material-icons-extended",
                     "androidx-compose-tooling",
                     "androidx-compose-ui",
                     "androidx-viewmodel-compose"

ui-lib/build.gradle.kts

@@ -20,6 +20,18 @@ android {
     kotlinOptions {
         jvmTarget = libs.versions.java.get()
         allWarningsAsErrors = project.property("IS_TREAT_WARNINGS_AS_ERRORS").toString().toBoolean()
+        freeCompilerArgs = freeCompilerArgs.plus("-Xopt-in=kotlin.RequiresOptIn")
+    }
+
+    sourceSets {
+        getByName("main").apply {
+            res.setSrcDirs(
+                setOf(
+                    "src/main/res/ui/common",
+                    "src/main/res/ui/onboarding"
+                )
+            )
+        }
     }
 }
 

ui-lib/src/androidTest/java/cash/z/ecc/ui/screen/onboarding/view/OnboardingViewTest.kt

@@ -11,7 +11,7 @@ import cash.z.ecc.ui.R
 import cash.z.ecc.ui.screen.onboarding.model.OnboardingStage
 import cash.z.ecc.ui.screen.onboarding.state.OnboardingState
 import cash.z.ecc.ui.screen.onboarding.test.getStringResource
-import cash.z.ecc.ui.theme.MyApplicationTheme
+import cash.z.ecc.ui.theme.ZcashTheme
 import org.junit.Assert.assertEquals
 import org.junit.Rule
 import org.junit.Test
@@ -263,7 +263,7 @@ class OnboardingViewTest {
 
         init {
             composeTestRule.setContent {
-                MyApplicationTheme {
+                ZcashTheme {
                     Onboarding(
                         onboardingState,
                         onCreateWallet = { onCreateWalletCallbackCount++ },

ui-lib/src/main/AndroidManifest.xml

@@ -8,7 +8,6 @@
         <activity
             android:name="cash.z.ecc.ui.MainActivity"
             android:label="@string/app_name"
-            android:theme="@style/Theme.MyApplication"
             android:exported="false">
         </activity>
     </application>

ui-lib/src/main/java/cash/z/ecc/ui/MainActivity.kt

@@ -6,7 +6,7 @@ import androidx.activity.compose.setContent
 import androidx.activity.viewModels
 import cash.z.ecc.ui.screen.onboarding.view.Onboarding
 import cash.z.ecc.ui.screen.onboarding.viewmodel.OnboardingViewModel
-import cash.z.ecc.ui.theme.MyApplicationTheme
+import cash.z.ecc.ui.theme.ZcashTheme
 
 class MainActivity : ComponentActivity() {
 
@@ -15,7 +15,7 @@ class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            MyApplicationTheme {
+            ZcashTheme {
                 Onboarding(
                     onboardingState = onboardingViewModel.onboardingState,
                     onImportWallet = { TODO("Implement wallet import") },

ui-lib/src/main/java/cash/z/ecc/ui/screen/common/Button.kt

@@ -0,0 +1,89 @@
+package cash.z.ecc.ui.screen.common
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.ButtonDefaults.buttonColors
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import cash.z.ecc.ui.theme.ZcashTheme
+
+@Composable
+fun PrimaryButton(
+    onClick: () -> Unit,
+    text: String,
+    modifier: Modifier = Modifier
+) {
+    Button(
+        onClick = onClick,
+        modifier = modifier.then(
+            Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp, vertical = 8.dp)
+        ),
+        colors = buttonColors(backgroundColor = MaterialTheme.colors.primary)
+    ) {
+        Text(style = MaterialTheme.typography.button, text = text, color = MaterialTheme.colors.onPrimary)
+    }
+}
+
+@Composable
+fun SecondaryButton(
+    onClick: () -> Unit,
+    text: String,
+    modifier: Modifier = Modifier
+) {
+    Button(
+        onClick = onClick,
+        modifier = modifier.then(
+            Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp, vertical = 8.dp)
+        ),
+        colors = buttonColors(backgroundColor = MaterialTheme.colors.secondary)
+    ) {
+        Text(style = MaterialTheme.typography.button, text = text, color = MaterialTheme.colors.onSecondary)
+    }
+}
+
+@Composable
+fun NavigationButton(
+    onClick: () -> Unit,
+    text: String,
+    modifier: Modifier = Modifier
+) {
+    Button(
+        onClick = onClick,
+        modifier = modifier.then(
+            Modifier
+                .padding(horizontal = 16.dp, vertical = 8.dp)
+        ),
+        colors = buttonColors(backgroundColor = MaterialTheme.colors.secondary)
+    ) {
+        Text(style = MaterialTheme.typography.button, text = text, color = MaterialTheme.colors.onSecondary)
+    }
+}
+
+@Composable
+fun TertiaryButton(
+    onClick: () -> Unit,
+    text: String,
+    modifier: Modifier = Modifier
+) {
+    Button(
+        onClick = onClick,
+        modifier = modifier.then(
+            Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp, vertical = 8.dp)
+        ),
+        elevation = ButtonDefaults.elevation(0.dp, 0.dp, 0.dp),
+        colors = buttonColors(backgroundColor = ZcashTheme.colors.tertiary)
+    ) {
+        Text(style = MaterialTheme.typography.button, text = text, color = ZcashTheme.colors.onTertiary)
+    }
+}

ui-lib/src/main/java/cash/z/ecc/ui/screen/common/Progress.kt

@@ -0,0 +1,17 @@
+package cash.z.ecc.ui.screen.common
+
+import androidx.compose.material.LinearProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import cash.z.ecc.ui.screen.onboarding.model.Progress
+import cash.z.ecc.ui.theme.ZcashTheme
+
+// Eventually rename to GradientLinearProgressIndicator
+@Composable
+fun PinkProgress(progress: Progress, modifier: Modifier = Modifier) {
+    // Needs custom implementation to apply gradient
+    LinearProgressIndicator(
+        progress = progress.percent().decimal, modifier,
+        ZcashTheme.colors.progressStart, ZcashTheme.colors.progressBackground
+    )
+}

ui-lib/src/main/java/cash/z/ecc/ui/screen/common/Text.kt

@@ -0,0 +1,33 @@
+package cash.z.ecc.ui.screen.common
+
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import cash.z.ecc.ui.theme.ZcashTheme
+
+@Composable
+fun Header(
+    text: String,
+    modifier: Modifier = Modifier
+) {
+    Text(
+        text = text,
+        style = MaterialTheme.typography.h1,
+        color = ZcashTheme.colors.onBackgroundHeader,
+        modifier = modifier
+    )
+}
+
+@Composable
+fun Body(
+    text: String,
+    modifier: Modifier = Modifier
+) {
+    Text(
+        text = text,
+        style = MaterialTheme.typography.body1,
+        color = MaterialTheme.colors.onBackground,
+        modifier = modifier
+    )
+}

ui-lib/src/main/java/cash/z/ecc/ui/screen/debug/view/DesignGuide.kt

@@ -0,0 +1,52 @@
+package cash.z.ecc.ui.screen.debug.view
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.Surface
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.List
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material.icons.filled.Shield
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import cash.z.ecc.ui.screen.common.Body
+import cash.z.ecc.ui.screen.common.Header
+import cash.z.ecc.ui.screen.common.NavigationButton
+import cash.z.ecc.ui.screen.common.PinkProgress
+import cash.z.ecc.ui.screen.common.PrimaryButton
+import cash.z.ecc.ui.screen.common.SecondaryButton
+import cash.z.ecc.ui.screen.common.TertiaryButton
+import cash.z.ecc.ui.screen.onboarding.model.Index
+import cash.z.ecc.ui.screen.onboarding.model.Progress
+import cash.z.ecc.ui.screen.onboarding.view.Callout
+import cash.z.ecc.ui.theme.ZcashTheme
+
+@Preview
+@Composable
+fun ComposablePreview() {
+    ZcashTheme(darkTheme = false) {
+        DesignGuide()
+    }
+}
+
+@Composable
+// Allowing magic numbers since this is debug-only
+@Suppress("MagicNumber")
+fun DesignGuide() {
+    Surface {
+        Column {
+            Header(text = "H1")
+            Body(text = "body")
+            NavigationButton(onClick = { }, text = "Back")
+            NavigationButton(onClick = { }, text = "Next")
+            PrimaryButton(onClick = { }, text = "Primary button")
+            SecondaryButton(onClick = { }, text = "Secondary button")
+            TertiaryButton(onClick = { }, text = "Tertiary button")
+            Callout(Icons.Filled.Shield, contentDescription = "Shield")
+            Callout(Icons.Filled.Person, contentDescription = "Person")
+            Callout(Icons.Filled.List, contentDescription = "List")
+            PinkProgress(progress = Progress(Index(1), Index(4)), Modifier.fillMaxWidth())
+        }
+    }
+}

ui-lib/src/main/java/cash/z/ecc/ui/screen/onboarding/view/OnboardingView.kt

@@ -1,37 +1,49 @@
 package cash.z.ecc.ui.screen.onboarding.view
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material.Button
-import androidx.compose.material.LinearProgressIndicator
-import androidx.compose.material.Text
+import androidx.compose.material.Icon
+import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.ColorPainter
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import cash.z.ecc.ui.R
+import cash.z.ecc.ui.screen.common.Body
+import cash.z.ecc.ui.screen.common.Header
+import cash.z.ecc.ui.screen.common.NavigationButton
+import cash.z.ecc.ui.screen.common.PinkProgress
+import cash.z.ecc.ui.screen.common.PrimaryButton
+import cash.z.ecc.ui.screen.common.SecondaryButton
+import cash.z.ecc.ui.screen.common.TertiaryButton
 import cash.z.ecc.ui.screen.onboarding.model.OnboardingStage
 import cash.z.ecc.ui.screen.onboarding.model.Progress
 import cash.z.ecc.ui.screen.onboarding.state.OnboardingState
 import cash.z.ecc.ui.theme.MINIMAL_WEIGHT
+import cash.z.ecc.ui.theme.ZcashTheme
 
 @Preview
 @Composable
 fun ComposablePreview() {
-    Onboarding(
-        OnboardingState(OnboardingStage.UnifiedAddresses),
-        onImportWallet = {},
-        onCreateWallet = {}
-    )
+    ZcashTheme(darkTheme = true) {
+        Onboarding(
+            OnboardingState(OnboardingStage.UnifiedAddresses),
+            onImportWallet = {},
+            onCreateWallet = {}
+        )
+    }
 }
 
 /**
@@ -44,22 +56,24 @@ fun Onboarding(
     onImportWallet: () -> Unit,
     onCreateWallet: () -> Unit
 ) {
-    Column {
-        TopNavButtons(onboardingState)
+    Surface {
+        Column {
+            TopNavButtons(onboardingState)
 
-        val onboardingStage = onboardingState.current.collectAsState().value
+            val onboardingStage = onboardingState.current.collectAsState().value
 
-        when (onboardingStage) {
-            OnboardingStage.ShieldedByDefault -> ShieldedByDefault()
-            OnboardingStage.UnifiedAddresses -> UnifiedAddresses()
-            OnboardingStage.More -> More()
-            OnboardingStage.Wallet -> Wallet(
-                onCreateWallet = onCreateWallet,
-                onImportWallet = onImportWallet
-            )
+            when (onboardingStage) {
+                OnboardingStage.ShieldedByDefault -> ShieldedByDefault()
+                OnboardingStage.UnifiedAddresses -> UnifiedAddresses()
+                OnboardingStage.More -> More()
+                OnboardingStage.Wallet -> Wallet(
+                    onCreateWallet = onCreateWallet,
+                    onImportWallet = onImportWallet
+                )
+            }
+
+            BottomNav(onboardingStage.getProgress(), onboardingState::goNext)
         }
-
-        BottomNav(onboardingStage.getProgress(), onboardingState::goNext)
     }
 }
 
@@ -67,17 +81,17 @@ fun Onboarding(
 private fun TopNavButtons(onboardingState: OnboardingState) {
     Row {
         if (onboardingState.hasPrevious()) {
-            Button(onboardingState::goPrevious) {
-                Text(stringResource(R.string.onboarding_back))
-            }
+            NavigationButton(onboardingState::goPrevious, stringResource(R.string.onboarding_back))
         }
 
-        Spacer(Modifier.fillMaxWidth().weight(MINIMAL_WEIGHT, true))
+        Spacer(
+            Modifier
+                .fillMaxWidth()
+                .weight(MINIMAL_WEIGHT, true)
+        )
 
         if (onboardingState.hasNext()) {
-            Button(onboardingState::goToEnd) {
-                Text(stringResource(R.string.onboarding_skip))
-            }
+            NavigationButton(onboardingState::goToEnd, stringResource(R.string.onboarding_skip))
         }
     }
 }
@@ -86,14 +100,12 @@ private fun TopNavButtons(onboardingState: OnboardingState) {
 private fun BottomNav(progress: Progress, onNext: () -> Unit) {
     if (progress.current != progress.last) {
         Column {
-            Button(onNext, Modifier.fillMaxWidth()) {
-                Text(stringResource(R.string.onboarding_next))
-            }
+            SecondaryButton(onNext, stringResource(R.string.onboarding_next), Modifier.fillMaxWidth())
 
             // Converts from index to human numbering
-            Text((progress.current.value + 1).toString())
+            Body((progress.current.value + 1).toString())
 
-            LinearProgressIndicator(progress = progress.percent().decimal, Modifier.fillMaxWidth())
+            PinkProgress(progress, Modifier.fillMaxWidth())
         }
     }
 }
@@ -137,12 +149,11 @@ private fun More() {
 @Composable
 private fun Wallet(onCreateWallet: () -> Unit, onImportWallet: () -> Unit) {
     Column {
-        Button(onCreateWallet, Modifier.fillMaxWidth()) {
-            Text(stringResource(R.string.onboarding_4_create_new_wallet))
-        }
-        Button(onImportWallet, Modifier.fillMaxWidth()) {
-            Text(stringResource(R.string.onboarding_4_import_existing_wallet))
-        }
+        PrimaryButton(onCreateWallet, stringResource(R.string.onboarding_4_create_new_wallet), Modifier.fillMaxWidth())
+        TertiaryButton(
+            onImportWallet, stringResource(R.string.onboarding_4_import_existing_wallet),
+            Modifier.fillMaxWidth()
+        )
     }
 }
 
@@ -159,7 +170,14 @@ private fun Content(
             @Suppress("MagicNumber")
             Image(image, imageContentDescription, Modifier.fillMaxSize(0.50f))
         }
-        Text(headline)
-        Text(body)
+        Header(headline)
+        Body(body)
+    }
+}
+
+@Composable
+fun Callout(imageVector: ImageVector, contentDescription: String) {
+    Box(modifier = Modifier.background(ZcashTheme.colors.callout)) {
+        Icon(imageVector, contentDescription, tint = ZcashTheme.colors.onCallout)
     }
 }

ui-lib/src/main/java/cash/z/ecc/ui/theme/Color.kt

@@ -1,15 +1,75 @@
+@file:Suppress("MagicNumber")
+
 package cash.z.ecc.ui.theme
 
 import androidx.compose.ui.graphics.Color
 
-@Suppress("MagicNumber")
-val Purple200 = Color(0xFFBB86FC)
+object Dark {
+    val backgroundStart = Color(0xff243155)
+    val backgroundEnd = Color(0xff29365A)
 
-@Suppress("MagicNumber")
-val Purple500 = Color(0xFF6200EE)
+    val textHeaderOnBackground = Color(0xffCBDCF2)
+    val textBodyOnBackground = Color(0xFF93A4BE)
+    val textPrimaryButton = Color(0xFF0F2341)
+    val textSecondaryButton = Color(0xFF0F2341)
+    val textTertiaryButton = Color.White
+    val textNavigationButton = Color.Black
+    val textCaption = Color(0xFF68728B)
 
-@Suppress("MagicNumber")
-val Purple700 = Color(0xFF3700B3)
+    val primaryButton = Color(0xFFFFB900)
+    val primaryButtonPressed = Color(0xFFFFD800)
+    val primaryButtonDisabled = Color(0x33F4B728)
 
-@Suppress("MagicNumber")
-val Teal200 = Color(0xFF03DAC5)
+    val secondaryButton = Color(0xFFA7C0D9)
+    val secondaryButtonPressed = Color(0xFFC8DCEF)
+    val secondaryButtonDisabled = Color(0x33C8DCEF)
+
+    val tertiaryButton = Color.Transparent
+    val tertiaryButtonPressed = Color(0xB0C3D2BA)
+    // TODO how does the invisible button show a disabled state?
+
+    val navigationButton = Color(0xFFA7C0D9)
+    val navigationButtonPressed = Color(0xFFC8DCEF)
+
+    val progressStart = Color(0xFFF364CE)
+    val progressEnd = Color(0xFFF8964F)
+    val progressBackground = Color(0xFF929bb3)
+
+    val callout = Color(0xFFa7bed8)
+    val onCallout = Color(0xFF3d698f)
+}
+
+object Light {
+    val backgroundStart = Color(0xFFE3EFF9)
+    val backgroundEnd = Color(0xFFD2E4F3)
+
+    val textHeaderOnBackground = Color(0xff2D3747)
+    val textBodyOnBackground = Color(0xFF7B8897)
+    val textNavigationButton = Color(0xFF7B8897)
+    val textPrimaryButton = Color(0xFFF2F7FC)
+    val textSecondaryButton = Color(0xFF2E476E)
+    val textTertiaryButton = Color(0xFF283559)
+    val textCaption = Color(0xFF2D3747)
+
+    // TODO The button colors are wrong for light
+    val primaryButton = Color(0xFF263357)
+    val primaryButtonPressed = Color(0xFFFFD800)
+    val primaryButtonDisabled = Color(0x33F4B728)
+
+    val secondaryButton = Color(0xFFE8F3FA)
+    val secondaryButtonPressed = Color(0xFFFAFBFD)
+    val secondaryButtonDisabled = Color(0xFFE6EFF8)
+
+    val tertiaryButton = Color.Transparent
+    val tertiaryButtonPressed = Color(0xFFFFFFFF)
+
+    val navigationButton = Color(0xFFE3EDF7)
+    val navigationButtonPressed = Color(0xFFE3EDF7)
+
+    val progressStart = Color(0xFFF364CE)
+    val progressEnd = Color(0xFFF8964F)
+    val progressBackground = Color(0xFFbeccdf)
+
+    val callout = Color(0xFFe6f0f9)
+    val onCallout = Color(0xFFa1b8d0)
+}

ui-lib/src/main/java/cash/z/ecc/ui/theme/Theme.kt

@@ -5,43 +5,110 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.darkColors
 import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.graphics.Color
 
 private val DarkColorPalette = darkColors(
-    primary = Purple200,
-    primaryVariant = Purple700,
-    secondary = Teal200
+    primary = Dark.primaryButton,
+    secondary = Dark.secondaryButton,
+    onPrimary = Dark.textPrimaryButton,
+    onSecondary = Dark.textSecondaryButton,
+    surface = Dark.backgroundStart,
+    onSurface = Dark.textBodyOnBackground,
+    background = Dark.backgroundStart,
+    onBackground = Dark.textBodyOnBackground
 )
 
 private val LightColorPalette = lightColors(
-    primary = Purple500,
-    primaryVariant = Purple700,
-    secondary = Teal200
-
-    /* Other default colors to override
-    background = Color.White,
-    surface = Color.White,
-    onPrimary = Color.White,
-    onSecondary = Color.Black,
-    onBackground = Color.Black,
-    onSurface = Color.Black,
-    */
+    primary = Light.primaryButton,
+    secondary = Light.secondaryButton,
+    onPrimary = Light.textPrimaryButton,
+    onSecondary = Light.textSecondaryButton,
+    surface = Light.backgroundStart,
+    onSurface = Light.textBodyOnBackground,
+    background = Light.backgroundStart,
+    onBackground = Light.textBodyOnBackground
 )
 
+@Immutable
+data class ExtendedColors(
+    val onBackgroundHeader: Color,
+    val tertiary: Color,
+    val onTertiary: Color,
+    val callout: Color,
+    val onCallout: Color,
+    val progressStart: Color,
+    val progressEnd: Color,
+    val progressBackground: Color
+)
+
+val DarkExtendedColorPalette = ExtendedColors(
+    onBackgroundHeader = Dark.textHeaderOnBackground,
+    tertiary = Dark.tertiaryButton,
+    onTertiary = Dark.textTertiaryButton,
+    callout = Dark.callout,
+    onCallout = Dark.onCallout,
+    progressStart = Dark.progressStart,
+    progressEnd = Dark.progressEnd,
+    progressBackground = Dark.progressBackground
+)
+
+val LightExtendedColorPalette = ExtendedColors(
+    onBackgroundHeader = Light.textHeaderOnBackground,
+    tertiary = Light.tertiaryButton,
+    onTertiary = Light.textTertiaryButton,
+    callout = Light.callout,
+    onCallout = Light.onCallout,
+    progressStart = Light.progressStart,
+    progressEnd = Light.progressEnd,
+    progressBackground = Light.progressBackground
+)
+
+val LocalExtendedColors = staticCompositionLocalOf {
+    ExtendedColors(
+        onBackgroundHeader = Color.Unspecified,
+        tertiary = Color.Unspecified,
+        onTertiary = Color.Unspecified,
+        callout = Color.Unspecified,
+        onCallout = Color.Unspecified,
+        progressStart = Color.Unspecified,
+        progressEnd = Color.Unspecified,
+        progressBackground = Color.Unspecified
+    )
+}
+
 @Composable
-fun MyApplicationTheme(
+fun ZcashTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     content: @Composable () -> Unit
 ) {
-    val colors = if (darkTheme) {
+    val baseColors = if (darkTheme) {
         DarkColorPalette
     } else {
         LightColorPalette
     }
 
-    MaterialTheme(
-        colors = colors,
-        typography = Typography,
-        shapes = Shapes,
-        content = content
-    )
+    val extendedColors = if (darkTheme) {
+        DarkExtendedColorPalette
+    } else {
+        LightExtendedColorPalette
+    }
+
+    CompositionLocalProvider(LocalExtendedColors provides extendedColors) {
+        MaterialTheme(
+            colors = baseColors,
+            typography = Typography,
+            shapes = Shapes,
+            content = content
+        )
+    }
+}
+
+// Use with eg. ZcashTheme.colors.tertiary
+object ZcashTheme {
+    val colors: ExtendedColors
+        @Composable
+        get() = LocalExtendedColors.current
 }

ui-lib/src/main/java/cash/z/ecc/ui/theme/Type.kt

@@ -1,28 +0,0 @@
-package cash.z.ecc.ui.theme
-
-import androidx.compose.material.Typography
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.sp
-
-// Set of Material typography styles to start with
-val Typography = Typography(
-    body1 = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 16.sp
-    )
-    /* Other default text styles to override
-    button = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.W500,
-        fontSize = 14.sp
-    ),
-    caption = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 12.sp
-    )
-    */
-)

ui-lib/src/main/java/cash/z/ecc/ui/theme/Typography.kt

@@ -0,0 +1,39 @@
+package cash.z.ecc.ui.theme
+
+import androidx.compose.material.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.ExperimentalUnitApi
+import androidx.compose.ui.unit.sp
+import cash.z.ecc.ui.R
+
+private val Rubik = FontFamily(
+    Font(R.font.rubik_regular, FontWeight.W400),
+    Font(R.font.rubik_medium, FontWeight.W500)
+)
+
+@OptIn(ExperimentalUnitApi::class)
+val Typography = Typography(
+    h1 = TextStyle(
+        fontFamily = Rubik,
+        fontWeight = FontWeight.W600,
+        fontSize = 30.sp,
+    ),
+    body1 = TextStyle(
+        fontFamily = Rubik,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp
+    ),
+    caption = TextStyle(
+        fontFamily = Rubik,
+        fontWeight = FontWeight.Medium,
+        fontSize = 16.sp
+    ),
+    button = TextStyle(
+        fontFamily = Rubik,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp
+    ),
+)

ui-lib/src/main/res/values/colors.xml

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-    <color name="purple_200">#FFBB86FC</color>
-    <color name="purple_500">#FF6200EE</color>
-    <color name="purple_700">#FF3700B3</color>
-    <color name="teal_200">#FF03DAC5</color>
-    <color name="teal_700">#FF018786</color>
-    <color name="black">#FF000000</color>
-    <color name="white">#FFFFFFFF</color>
-
-</resources>

ui-lib/src/main/res/values/themes.xml

@@ -1,25 +0,0 @@
-<resources xmlns:tools="http://schemas.android.com/tools">
-    <!-- Base application theme. -->
-    <style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
-        <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/purple_500</item>
-        <item name="colorPrimaryVariant">@color/purple_700</item>
-        <item name="colorOnPrimary">@color/white</item>
-        <!-- Secondary brand color. -->
-        <item name="colorSecondary">@color/teal_200</item>
-        <item name="colorSecondaryVariant">@color/teal_700</item>
-        <item name="colorOnSecondary">@color/black</item>
-        <!-- Status bar color. -->
-        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
-        <!-- Customize your theme here. -->
-    </style>
-
-    <style name="Theme.MyApplication.NoActionBar">
-        <item name="windowActionBar">false</item>
-        <item name="windowNoTitle">true</item>
-    </style>
-
-    <style name="Theme.MyApplication.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
-
-    <style name="Theme.MyApplication.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
-</resources>