diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/Dimens.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/Dimens.kt new file mode 100644 index 00000000..1ad55c24 --- /dev/null +++ b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/Dimens.kt @@ -0,0 +1,81 @@ +package co.electriccoin.zcash.ui.design.theme + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.Immutable +import androidx.compose.runtime.staticCompositionLocalOf +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp + +@Immutable +data class Dimens( + // Default spacings: + val spacingXtiny: Dp, + val spacingTiny: Dp, + val spacingSmall: Dp, + val spacingDefault: Dp, + val spacingLarge: Dp, + val spacingXlarge: Dp, + val spacingHuge: Dp, + + // List of custom spacings: +) + +private val defaultDimens = Dimens( + spacingXtiny = 2.dp, + spacingTiny = 4.dp, + spacingSmall = 8.dp, + spacingDefault = 16.dp, + spacingLarge = 24.dp, + spacingXlarge = 32.dp, + spacingHuge = 64.dp, +) + +private val normalDimens = defaultDimens + +internal var LocalDimens = staticCompositionLocalOf { defaultDimens } + +/** + * This is a convenience way on how to provide device specification based spacings. We use Configuration from Compose + * package for this purpose. + * + * For now we use just "normal" sized spacings for phone devices. Here is an example how we could split spacings to + * more groups based on screen size: + * + * val screenLayoutBitMask = LocalConfiguration.current.screenLayout + * val resultDimens = when (screenLayoutBitMask and SCREENLAYOUT_SIZE_MASK) { + * SCREENLAYOUT_SIZE_SMALL -> { + * Twig.info { "Current device screen size: SMALL. Screen is approximately 320x426 dp at least." } + * smallDimens + * } + * SCREENLAYOUT_SIZE_NORMAL -> { + * Twig.info { "Current device screen size: NORMAL. Screen is approximately 320x470 dp at least." } + * normalDimens + * } + * SCREENLAYOUT_SIZE_LARGE -> { + * Twig.info { "Current device screen size: LARGE. Screen is approximately 480x640 dp at least." } + * largeDimens + * } + * SCREENLAYOUT_SIZE_XLARGE -> { + * Twig.info { "Current device screen size: XLARGE. Screen is approximately 720x960 dp at least." } + * xlargeDimens + * } + * else -> { + * Twig.info { "Current device screen size: UNDEFINED - using NORMAL size values." } + * normalDimens + * } + * } + * LocalDimens = staticCompositionLocalOf { resultDimens } + * + * + * Alternatively we could also use different values based on these metrics: + * - landscape/portrait orientation modes + * - long/normal screen aspect ratio (screen is wider/taller than normal) + * - LRT/RTL screen set up + * - rounded/normal screen shape + */ +@Composable +internal fun ProvideDimens(content: @Composable () -> Unit,) { + val resultDimens = normalDimens + CompositionLocalProvider(LocalDimens provides resultDimens, content = content) +} diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZcashTheme.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZcashTheme.kt index 42ec60eb..463f645b 100644 --- a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZcashTheme.kt +++ b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZcashTheme.kt @@ -32,11 +32,13 @@ fun ZcashTheme( } CompositionLocalProvider(LocalExtendedColors provides extendedColors) { - MaterialTheme( - colorScheme = baseColors, - typography = Typography, - content = content - ) + ProvideDimens { + MaterialTheme( + colorScheme = baseColors, + typography = Typography, + content = content + ) + } } } @@ -50,6 +52,14 @@ object ZcashTheme { @Composable get() = LocalExtendedTypography.current + // TODO [#808]: [Design system] Use Dimens across the app + // TODO [#808]: https://github.com/zcash/secant-android-wallet/issues/808 + val dimens: Dimens + @Composable + get() = LocalDimens.current + + // TODO [#807]: [Design system] Remove deprecated Paddings class + // TODO [#807]: https://github.com/zcash/secant-android-wallet/issues/807 val paddings: Paddings @Composable get() = Paddings()