Update drawable names with consistent prefixes (#6060)
20
README.md
@ -4,7 +4,6 @@
|
||||
|
||||
- [Compatibility](#compatibility)
|
||||
- [Setup](#setup)
|
||||
- [Theme](#theme)
|
||||
- [Dependencies](#dependencies)
|
||||
|
||||
## Compatibility
|
||||
@ -93,25 +92,6 @@ chmod +x .git/hooks/pre-commit
|
||||
echo "detekt pre-commit hook installed successfully to .git/hooks/pre-commit"
|
||||
```
|
||||
|
||||
## Theme
|
||||
|
||||
### Icons & Illustrations
|
||||
|
||||
The app supports light mode, dark mode and dynamic colors. Most icons in the app will display correctly using tinting but multi-tonal icons and illustrations require extra processing in order to be displayed properly with dynamic colors.
|
||||
|
||||
All illustrations and multi-tonal icons require the svg paths to be tagged with the `name` attribute in order for each individual path to be tinted the appropriate color. Any untagged path will not be tinted and the resulting image will be incorrect.
|
||||
|
||||
The supported tags are as follows:
|
||||
|
||||
* outline
|
||||
* primary
|
||||
* secondary
|
||||
* tertiary
|
||||
* accent
|
||||
* logo
|
||||
* navigation
|
||||
* navigationActiveAccent
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Application Dependencies
|
||||
|
||||
@ -37,7 +37,7 @@ class CredentialExchangeRegistryManagerImpl(
|
||||
CredentialTypes.CREDENTIAL_TYPE_TOTP,
|
||||
CredentialTypes.CREDENTIAL_TYPE_WIFI,
|
||||
),
|
||||
iconResId = BitwardenDrawable.icon,
|
||||
iconResId = BitwardenDrawable.logo_bitwarden_icon,
|
||||
),
|
||||
)
|
||||
.fold(
|
||||
|
||||
@ -231,7 +231,7 @@ private fun SetupAutoFillContentHeader(
|
||||
@Composable
|
||||
private fun OrderedHeaderContent() {
|
||||
BitwardenGifImage(
|
||||
resId = BitwardenDrawable.img_setup_autofill,
|
||||
resId = BitwardenDrawable.gif_setup_autofill,
|
||||
modifier = Modifier
|
||||
.clip(
|
||||
RoundedCornerShape(
|
||||
|
||||
@ -80,7 +80,7 @@ private fun SetupCompleteContent(
|
||||
) {
|
||||
Spacer(Modifier.height(32.dp))
|
||||
Image(
|
||||
painter = rememberVectorPainter(BitwardenDrawable.img_setup_complete),
|
||||
painter = rememberVectorPainter(BitwardenDrawable.ill_setup_complete),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.align(CenterHorizontally)
|
||||
|
||||
@ -246,7 +246,7 @@ private fun SetUpLaterButton(
|
||||
private fun ColumnScope.SetupUnlockHeaderCompact() {
|
||||
Spacer(modifier = Modifier.height(height = 32.dp))
|
||||
Image(
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.account_setup),
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.ill_account_setup),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.standardHorizontalMargin()
|
||||
@ -290,7 +290,7 @@ private fun SetupUnlockHeaderMedium(
|
||||
.standardHorizontalMargin(),
|
||||
) {
|
||||
Image(
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.account_setup),
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.ill_account_setup),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.size(size = 100.dp)
|
||||
|
||||
@ -117,7 +117,7 @@ private fun CheckEmailContent(
|
||||
) {
|
||||
Spacer(modifier = Modifier.height(32.dp))
|
||||
Image(
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.open_email),
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.ill_open_email),
|
||||
contentDescription = null,
|
||||
contentScale = ContentScale.FillHeight,
|
||||
modifier = Modifier
|
||||
|
||||
@ -330,7 +330,7 @@ private fun CompleteRegistrationContentHeader(
|
||||
@Composable
|
||||
private fun OrderedHeaderContent() {
|
||||
Image(
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.lock),
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.ill_lock),
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(100.dp),
|
||||
)
|
||||
|
||||
@ -219,7 +219,7 @@ private fun LandingScreenContent(
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
|
||||
Image(
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.bitwarden_logo),
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.logo_bitwarden),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.standardHorizontalMargin()
|
||||
|
||||
@ -186,7 +186,7 @@ private fun StartRegistrationContent(
|
||||
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
Image(
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.bitwarden_logo),
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.logo_bitwarden),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.standardHorizontalMargin()
|
||||
|
||||
@ -122,8 +122,8 @@ val TwoFactorAuthMethod.shouldUseNfc: Boolean
|
||||
@get:DrawableRes
|
||||
val TwoFactorAuthMethod.imageRes: Int?
|
||||
get() = when (this) {
|
||||
TwoFactorAuthMethod.YUBI_KEY -> BitwardenDrawable.yubi_key
|
||||
TwoFactorAuthMethod.EMAIL -> BitwardenDrawable.img_new_device_verification
|
||||
TwoFactorAuthMethod.AUTHENTICATOR_APP -> BitwardenDrawable.img_authenticator
|
||||
TwoFactorAuthMethod.YUBI_KEY -> BitwardenDrawable.img_yubi_key
|
||||
TwoFactorAuthMethod.EMAIL -> BitwardenDrawable.ill_new_device_verification
|
||||
TwoFactorAuthMethod.AUTHENTICATOR_APP -> BitwardenDrawable.ill_authenticator
|
||||
else -> null
|
||||
}
|
||||
|
||||
@ -73,7 +73,7 @@ data class WelcomeState(
|
||||
*/
|
||||
@Parcelize
|
||||
data object CardOne : WelcomeCard() {
|
||||
override val imageRes: Int get() = BitwardenDrawable.img_vault_items
|
||||
override val imageRes: Int get() = BitwardenDrawable.ill_vault_items
|
||||
override val titleRes: Int get() = BitwardenString.security_prioritized
|
||||
override val messageRes: Int get() = BitwardenString.welcome_message_1
|
||||
}
|
||||
@ -83,7 +83,7 @@ data class WelcomeState(
|
||||
*/
|
||||
@Parcelize
|
||||
data object CardTwo : WelcomeCard() {
|
||||
override val imageRes: Int get() = BitwardenDrawable.welcome_2
|
||||
override val imageRes: Int get() = BitwardenDrawable.ill_welcome_2
|
||||
override val titleRes: Int get() = BitwardenString.quick_and_easy_login
|
||||
override val messageRes: Int get() = BitwardenString.welcome_message_2
|
||||
}
|
||||
@ -93,7 +93,7 @@ data class WelcomeState(
|
||||
*/
|
||||
@Parcelize
|
||||
data object CardThree : WelcomeCard() {
|
||||
override val imageRes: Int get() = BitwardenDrawable.welcome_3
|
||||
override val imageRes: Int get() = BitwardenDrawable.ill_welcome_3
|
||||
override val titleRes: Int get() = BitwardenString.level_up_your_logins
|
||||
override val messageRes: Int get() = BitwardenString.welcome_message_3
|
||||
}
|
||||
@ -103,7 +103,7 @@ data class WelcomeState(
|
||||
*/
|
||||
@Parcelize
|
||||
data object CardFour : WelcomeCard() {
|
||||
override val imageRes: Int get() = BitwardenDrawable.welcome_4
|
||||
override val imageRes: Int get() = BitwardenDrawable.ill_welcome_4
|
||||
override val titleRes: Int get() = BitwardenString.your_data_when_and_where_you_need_it
|
||||
override val messageRes: Int get() = BitwardenString.welcome_message_4
|
||||
}
|
||||
|
||||
@ -52,7 +52,7 @@ fun buildVaultItemAutofillRemoteViews(
|
||||
getString(BitwardenString.go_to_my_vault)
|
||||
}
|
||||
},
|
||||
iconRes = BitwardenDrawable.icon,
|
||||
iconRes = BitwardenDrawable.logo_bitwarden_icon,
|
||||
shouldTintIcon = false,
|
||||
autofillContentDescription = null,
|
||||
)
|
||||
|
||||
@ -67,7 +67,7 @@ fun InlinePresentationSpec.createVaultItemInlinePresentationOrNull(
|
||||
} else {
|
||||
autofillAppInfo.context.getString(BitwardenString.my_vault)
|
||||
},
|
||||
iconRes = BitwardenDrawable.icon,
|
||||
iconRes = BitwardenDrawable.logo_bitwarden_icon,
|
||||
shouldTintIcon = false,
|
||||
)
|
||||
|
||||
|
||||
@ -337,7 +337,7 @@ private fun PendingRequestsEmpty(
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
Image(
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.pending_requests),
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.ill_pending_requests),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.standardHorizontalMargin()
|
||||
@ -375,7 +375,7 @@ private fun PendingRequestsBottomSheetContent(
|
||||
Column(modifier = modifier.verticalScroll(rememberScrollState())) {
|
||||
Spacer(modifier = Modifier.height(height = 24.dp))
|
||||
Image(
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.img_2fa),
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.ill_2fa),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.standardHorizontalMargin()
|
||||
|
||||
@ -222,7 +222,7 @@ private fun BlockAutoFillNoItems(
|
||||
Spacer(modifier = Modifier.height(height = 24.dp))
|
||||
Image(
|
||||
painter = rememberVectorPainter(
|
||||
id = BitwardenDrawable.blocked_uri,
|
||||
id = BitwardenDrawable.ill_blocked_uri,
|
||||
),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
|
||||
@ -135,7 +135,7 @@ fun RecordedLogsScreen(
|
||||
BitwardenEmptyContent(
|
||||
text = stringResource(id = BitwardenString.no_logs_recorded),
|
||||
illustrationData = IconData.Local(
|
||||
iconRes = BitwardenDrawable.il_secure_devices,
|
||||
iconRes = BitwardenDrawable.ill_secure_devices,
|
||||
),
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
)
|
||||
|
||||
@ -58,7 +58,7 @@ fun SendEmpty(
|
||||
|
||||
Spacer(modifier = Modifier.weight(1F))
|
||||
Image(
|
||||
painter = rememberVectorPainter(BitwardenDrawable.img_send),
|
||||
painter = rememberVectorPainter(BitwardenDrawable.ill_send),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.standardHorizontalMargin()
|
||||
|
||||
@ -205,7 +205,7 @@ private fun ReviewExportContent(
|
||||
.padding(top = 24.dp, bottom = 16.dp),
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = BitwardenDrawable.img_import_logins),
|
||||
painter = painterResource(id = BitwardenDrawable.ill_import_logins),
|
||||
contentDescription = null,
|
||||
modifier = Modifier.height(160.dp),
|
||||
contentScale = ContentScale.Fit,
|
||||
|
||||
@ -235,7 +235,7 @@ private fun InitialImportLoginsContent(
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
) {
|
||||
Image(
|
||||
painter = rememberVectorPainter(BitwardenDrawable.img_import_logins),
|
||||
painter = rememberVectorPainter(BitwardenDrawable.ill_import_logins),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.standardHorizontalMargin()
|
||||
@ -433,7 +433,7 @@ private fun ImportLoginsSuccessBottomSheetContent(
|
||||
) {
|
||||
Spacer(Modifier.height(24.dp))
|
||||
Image(
|
||||
painter = rememberVectorPainter(BitwardenDrawable.img_secure_devices),
|
||||
painter = rememberVectorPainter(BitwardenDrawable.ill_secure_devices),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.standardHorizontalMargin()
|
||||
|
||||
@ -279,7 +279,7 @@ fun VaultData.toViewState(
|
||||
.asText()
|
||||
},
|
||||
vectorRes = totpData
|
||||
?.let { BitwardenDrawable.img_folder_question },
|
||||
?.let { BitwardenDrawable.ill_folder_question },
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -112,7 +112,7 @@ private fun VaultNoItems_preview() {
|
||||
modifier = Modifier.background(BitwardenTheme.colorScheme.background.primary),
|
||||
) {
|
||||
VaultNoItems(
|
||||
vectorRes = BitwardenDrawable.img_vault_items,
|
||||
vectorRes = BitwardenDrawable.ill_vault_items,
|
||||
headerText = stringResource(id = BitwardenString.save_and_protect_your_data),
|
||||
message = stringResource(
|
||||
BitwardenString.the_vault_protects_more_than_just_passwords,
|
||||
|
||||
@ -355,7 +355,7 @@ private fun VaultScreenScaffold(
|
||||
)
|
||||
}
|
||||
VaultNoItems(
|
||||
vectorRes = BitwardenDrawable.img_vault_items,
|
||||
vectorRes = BitwardenDrawable.ill_vault_items,
|
||||
headerText = stringResource(
|
||||
id = BitwardenString.save_and_protect_your_data,
|
||||
),
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<!-- Launch theme (for auto dark/light based on system) -->
|
||||
<style name="LaunchTheme" parent="Theme.SplashScreen">
|
||||
<item name="postSplashScreenTheme">@style/BaseTheme</item>
|
||||
<item name="windowSplashScreenAnimatedIcon">@drawable/logo_rounded</item>
|
||||
<item name="windowSplashScreenAnimatedIcon">@drawable/logo_shield_icon</item>
|
||||
<item name="windowSplashScreenBackground">@color/ic_launcher_background</item>
|
||||
</style>
|
||||
|
||||
|
||||
@ -67,7 +67,7 @@ class CredentialExchangeRegistryManagerImplTest {
|
||||
CredentialTypes.CREDENTIAL_TYPE_TOTP,
|
||||
CredentialTypes.CREDENTIAL_TYPE_WIFI,
|
||||
),
|
||||
iconResId = BitwardenDrawable.icon,
|
||||
iconResId = BitwardenDrawable.logo_bitwarden_icon,
|
||||
),
|
||||
)
|
||||
settingsDiskSource.storeAppRegisteredForExport(true)
|
||||
|
||||
@ -139,10 +139,10 @@ class TwoFactorAuthMethodExtensionTest {
|
||||
@Test
|
||||
fun `imageRes returns the expected value`() {
|
||||
mapOf(
|
||||
TwoFactorAuthMethod.AUTHENTICATOR_APP to BitwardenDrawable.img_authenticator,
|
||||
TwoFactorAuthMethod.EMAIL to BitwardenDrawable.img_new_device_verification,
|
||||
TwoFactorAuthMethod.AUTHENTICATOR_APP to BitwardenDrawable.ill_authenticator,
|
||||
TwoFactorAuthMethod.EMAIL to BitwardenDrawable.ill_new_device_verification,
|
||||
TwoFactorAuthMethod.DUO to null,
|
||||
TwoFactorAuthMethod.YUBI_KEY to BitwardenDrawable.yubi_key,
|
||||
TwoFactorAuthMethod.YUBI_KEY to BitwardenDrawable.img_yubi_key,
|
||||
TwoFactorAuthMethod.U2F to null,
|
||||
TwoFactorAuthMethod.REMEMBER to null,
|
||||
TwoFactorAuthMethod.DUO_ORGANIZATION to null,
|
||||
|
||||
@ -205,7 +205,7 @@ class BitwardenRemoteViewsTest {
|
||||
prepareRemoteViews(
|
||||
name = APP_NAME,
|
||||
subtitle = VAULT_IS_LOCKED,
|
||||
iconRes = BitwardenDrawable.icon,
|
||||
iconRes = BitwardenDrawable.logo_bitwarden_icon,
|
||||
)
|
||||
|
||||
// Test
|
||||
@ -233,7 +233,7 @@ class BitwardenRemoteViewsTest {
|
||||
anyConstructed<RemoteViews>()
|
||||
.setImageViewResource(
|
||||
R.id.icon,
|
||||
BitwardenDrawable.icon,
|
||||
BitwardenDrawable.logo_bitwarden_icon,
|
||||
)
|
||||
anyConstructed<RemoteViews>()
|
||||
.setInt(
|
||||
@ -263,7 +263,7 @@ class BitwardenRemoteViewsTest {
|
||||
prepareRemoteViews(
|
||||
name = APP_NAME,
|
||||
subtitle = GO_TO_MY_VAULT,
|
||||
iconRes = BitwardenDrawable.icon,
|
||||
iconRes = BitwardenDrawable.logo_bitwarden_icon,
|
||||
)
|
||||
|
||||
// Test
|
||||
@ -291,7 +291,7 @@ class BitwardenRemoteViewsTest {
|
||||
anyConstructed<RemoteViews>()
|
||||
.setImageViewResource(
|
||||
R.id.icon,
|
||||
BitwardenDrawable.icon,
|
||||
BitwardenDrawable.logo_bitwarden_icon,
|
||||
)
|
||||
anyConstructed<RemoteViews>()
|
||||
.setInt(
|
||||
|
||||
@ -253,7 +253,7 @@ class InlinePresentationSpecExtensionsTest {
|
||||
Icon
|
||||
.createWithResource(
|
||||
testContext,
|
||||
BitwardenDrawable.icon,
|
||||
BitwardenDrawable.logo_bitwarden_icon,
|
||||
)
|
||||
.setTintBlendMode(BlendMode.DST)
|
||||
testContext.getString(R.string.app_name)
|
||||
@ -292,7 +292,7 @@ class InlinePresentationSpecExtensionsTest {
|
||||
Icon
|
||||
.createWithResource(
|
||||
testContext,
|
||||
BitwardenDrawable.icon,
|
||||
BitwardenDrawable.logo_bitwarden_icon,
|
||||
)
|
||||
.setTintBlendMode(BlendMode.DST)
|
||||
testContext.getString(R.string.app_name)
|
||||
@ -389,7 +389,7 @@ class InlinePresentationSpecExtensionsTest {
|
||||
Icon
|
||||
.createWithResource(
|
||||
testContext,
|
||||
BitwardenDrawable.icon,
|
||||
BitwardenDrawable.logo_bitwarden_icon,
|
||||
)
|
||||
.setTintBlendMode(BlendMode.DST)
|
||||
} returns icon
|
||||
|
||||
@ -946,7 +946,7 @@ class VaultItemListingDataExtensionsTest {
|
||||
message = BitwardenString.search_for_a_login_or_add_a_new_login.asText(),
|
||||
shouldShowAddButton = false,
|
||||
buttonText = BitwardenString.new_item.asText(),
|
||||
vectorRes = BitwardenDrawable.img_folder_question,
|
||||
vectorRes = BitwardenDrawable.ill_folder_question,
|
||||
),
|
||||
vaultData.toViewState(
|
||||
itemListingType = VaultItemListingState.ItemListingType.Vault.Trash,
|
||||
|
||||
@ -112,7 +112,7 @@ fun UnlockScreen(
|
||||
.width(220.dp)
|
||||
.height(74.dp)
|
||||
.fillMaxWidth(),
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.ic_logo_horizontal),
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.logo_authenticator),
|
||||
contentDescription = stringResource(BitwardenString.bitwarden_authenticator),
|
||||
)
|
||||
Spacer(modifier = Modifier.height(32.dp))
|
||||
|
||||
@ -534,7 +534,7 @@ fun EmptyItemListingContent(
|
||||
) {
|
||||
|
||||
Image(
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.img_authenticator),
|
||||
painter = rememberVectorPainter(id = BitwardenDrawable.ill_authenticator),
|
||||
contentDescription = stringResource(id = BitwardenString.empty_item_list),
|
||||
modifier = Modifier
|
||||
.size(size = 100.dp)
|
||||
|
||||
@ -92,7 +92,7 @@ data class TutorialState(
|
||||
*/
|
||||
@Parcelize
|
||||
data object IntroSlide : TutorialSlide() {
|
||||
override val image: Int get() = BitwardenDrawable.img_authenticator
|
||||
override val image: Int get() = BitwardenDrawable.ill_authenticator
|
||||
override val title: Int get() = BitwardenString.secure_your_accounts_with_bitwarden_authenticator
|
||||
override val message: Int get() = BitwardenString.get_verification_codes_for_all_your_accounts
|
||||
}
|
||||
@ -102,7 +102,7 @@ data class TutorialState(
|
||||
*/
|
||||
@Parcelize
|
||||
data object QrScannerSlide : TutorialSlide() {
|
||||
override val image: Int get() = BitwardenDrawable.lock
|
||||
override val image: Int get() = BitwardenDrawable.ill_lock
|
||||
override val title: Int get() = BitwardenString.use_your_device_camera_to_scan_codes
|
||||
override val message: Int get() = BitwardenString.scan_the_qr_code_in_your_2_step_verification_settings_for_any_account
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<!-- Launch theme (for auto dark/light based on system) -->
|
||||
<style name="LaunchTheme" parent="Theme.SplashScreen">
|
||||
<item name="postSplashScreenTheme">@style/BaseTheme</item>
|
||||
<item name="windowSplashScreenAnimatedIcon">@drawable/logo_rounded</item>
|
||||
<item name="windowSplashScreenAnimatedIcon">@drawable/logo_shield_icon</item>
|
||||
<item name="windowSplashScreenBackground">@color/ic_launcher_background</item>
|
||||
</style>
|
||||
</resources>
|
||||
|
||||
34
ui/README.md
@ -5,8 +5,42 @@ An Android library containing common UI components, types, and utilities.
|
||||
## Contents
|
||||
|
||||
- [Compatibility](#compatibility)
|
||||
- [Theme](#theme)
|
||||
|
||||
## Compatibility
|
||||
|
||||
- **Minimum SDK**: 28
|
||||
- **Target SDK**: 35
|
||||
|
||||
## Theme
|
||||
|
||||
### Icons & Illustrations
|
||||
|
||||
#### Naming Convention
|
||||
|
||||
All drawables should be named with the appropriate prefix to identify what they are and how they are intended to be used.
|
||||
|
||||
| Prefix | Description |
|
||||
|---------|---------------|
|
||||
| `gif_` | gifs |
|
||||
| `ic_` | Icons |
|
||||
| `img_` | Raster Images |
|
||||
| `ill_` | Illustrations |
|
||||
| `logo_` | Brand Imagery |
|
||||
|
||||
#### Multi-tonal Illustrations
|
||||
|
||||
The app supports light mode, dark mode and dynamic colors. Most icons in the app will display correctly using tinting but multi-tonal icons and illustrations require extra processing in order to be displayed properly with dynamic colors.
|
||||
|
||||
All illustrations and multi-tonal icons require the svg paths to be tagged with the `name` attribute in order for each individual path to be tinted the appropriate color. Any untagged path will not be tinted and the resulting image will be incorrect.
|
||||
|
||||
The supported tags are as follows:
|
||||
|
||||
* outline
|
||||
* primary
|
||||
* secondary
|
||||
* tertiary
|
||||
* accent
|
||||
* logo
|
||||
* navigation
|
||||
* navigationActiveAccent
|
||||
|
||||
|
Before Width: | Height: | Size: 182 KiB After Width: | Height: | Size: 182 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 509 KiB After Width: | Height: | Size: 509 KiB |
|
Before Width: | Height: | Size: 300 KiB After Width: | Height: | Size: 300 KiB |
|
Before Width: | Height: | Size: 583 KiB After Width: | Height: | Size: 583 KiB |
|
Before Width: | Height: | Size: 901 KiB After Width: | Height: | Size: 901 KiB |
@ -1,84 +0,0 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="413dp"
|
||||
android:height="114dp"
|
||||
android:viewportWidth="413"
|
||||
android:viewportHeight="114">
|
||||
<group>
|
||||
<clip-path
|
||||
android:pathData="M134.84,0.57h143.82v112.71h-143.82z"/>
|
||||
<path
|
||||
android:pathData="M260.14,44.62V59.04M192.86,14.74L201.04,8.64C204.02,6.42 208.12,6.45 211.07,8.73L212.84,10.09M164.61,35.82L156.15,42.14C154.05,43.7 152.82,46.17 152.82,48.79V100.48C152.82,105.07 156.53,108.78 161.11,108.78H251.85C256.43,108.78 260.14,105.07 260.14,100.48V71.05"
|
||||
android:strokeWidth="2.76577"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#175DDC"
|
||||
android:strokeLineCap="round"/>
|
||||
<path
|
||||
android:pathData="M165.38,54.52V17.83C165.38,16.3 166.61,15.07 168.14,15.07H206.8"
|
||||
android:strokeWidth="2.76577"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#175DDC"
|
||||
android:strokeLineCap="round"/>
|
||||
<path
|
||||
android:pathData="M175.32,27.21H194.11"
|
||||
android:strokeWidth="2.76577"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#175DDC"
|
||||
android:strokeLineCap="round"/>
|
||||
<path
|
||||
android:pathData="M175.32,38.39H193.56"
|
||||
android:strokeWidth="2.76577"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#175DDC"
|
||||
android:strokeLineCap="round"/>
|
||||
<path
|
||||
android:pathData="M175.32,49.57H196.57"
|
||||
android:strokeWidth="2.76577"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#175DDC"
|
||||
android:strokeLineCap="round"/>
|
||||
<path
|
||||
android:pathData="M175.32,60.75H203.13"
|
||||
android:strokeWidth="2.76577"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#175DDC"
|
||||
android:strokeLineCap="round"/>
|
||||
<path
|
||||
android:pathData="M257.86,106.5L223.49,74.77C220.93,72.41 217.59,71.1 214.11,71.1H197.24C193.65,71.1 190.2,72.5 187.62,75L155.1,106.5"
|
||||
android:strokeWidth="2.76577"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#175DDC"/>
|
||||
<path
|
||||
android:pathData="M220.36,71.58L231.04,65.46"
|
||||
android:strokeWidth="2.76577"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#175DDC"
|
||||
android:strokeLineCap="round"/>
|
||||
<path
|
||||
android:pathData="M153.86,48.45L192.59,71.58"
|
||||
android:strokeWidth="2.77"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#175DDC"
|
||||
android:strokeLineCap="round"/>
|
||||
<path
|
||||
android:pathData="M260.35,35.09C260.35,51.78 246.82,65.3 230.13,65.3C213.45,65.3 199.92,51.78 199.92,35.09C199.92,18.4 213.45,4.88 230.13,4.88C246.82,4.88 260.35,18.4 260.35,35.09Z"
|
||||
android:strokeLineJoin="round"
|
||||
android:strokeWidth="2.76577"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#175DDC"
|
||||
android:strokeLineCap="round"/>
|
||||
<path
|
||||
android:pathData="M256.3,35.09C256.3,49.44 244.53,61.07 230.02,61.07M230.02,9.11C215.5,9.11 203.73,20.74 203.73,35.09"
|
||||
android:strokeLineJoin="round"
|
||||
android:strokeWidth="1.38289"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#175DDC"
|
||||
android:strokeLineCap="round"/>
|
||||
<path
|
||||
android:pathData="M254.25,53.55L258.87,58.17L276.21,75.51C277.56,76.86 277.56,79.05 276.21,80.4L275.49,81.12C274.14,82.47 271.95,82.47 270.6,81.12L253.26,63.78L248.64,59.16"
|
||||
android:strokeLineJoin="round"
|
||||
android:strokeWidth="2.76577"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#175DDC"
|
||||
android:strokeLineCap="round"/>
|
||||
</group>
|
||||
</vector>
|
||||
|
Before Width: | Height: | Size: 456 KiB After Width: | Height: | Size: 456 KiB |
@ -1,95 +0,0 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="200dp"
|
||||
android:height="200dp"
|
||||
android:viewportWidth="200"
|
||||
android:viewportHeight="200">
|
||||
<group>
|
||||
<clip-path android:pathData="M0,0.67h200v200h-200z" />
|
||||
<path
|
||||
android:name="primary"
|
||||
android:fillColor="#DBE5F6"
|
||||
android:pathData="M18.75,38.17C18.75,31.26 24.35,25.67 31.25,25.67H168.75C175.65,25.67 181.25,31.26 181.25,38.17V125.67C181.25,132.57 175.65,138.17 168.75,138.17H31.25C24.35,138.17 18.75,132.57 18.75,125.67V38.17Z" />
|
||||
<path
|
||||
android:name="outline"
|
||||
android:fillColor="#020F66"
|
||||
android:fillType="evenOdd"
|
||||
android:pathData="M168.75,29.83H31.25C26.65,29.83 22.92,33.56 22.92,38.17V125.67C22.92,130.27 26.65,134 31.25,134H168.75C173.35,134 177.08,130.27 177.08,125.67V38.17C177.08,33.56 173.35,29.83 168.75,29.83ZM31.25,25.67C24.35,25.67 18.75,31.26 18.75,38.17V125.67C18.75,132.57 24.35,138.17 31.25,138.17H168.75C175.65,138.17 181.25,132.57 181.25,125.67V38.17C181.25,31.26 175.65,25.67 168.75,25.67H31.25Z" />
|
||||
<path
|
||||
android:name="secondary"
|
||||
android:fillColor="#AAC3EF"
|
||||
android:pathData="M18.75,38.17H181.25V125.67H18.75V38.17Z" />
|
||||
<path
|
||||
android:name="outline"
|
||||
android:fillColor="#020F66"
|
||||
android:fillType="evenOdd"
|
||||
android:pathData="M177.08,42.33H22.92V121.5H177.08V42.33ZM18.75,38.17V125.67H181.25V38.17H18.75Z" />
|
||||
<path
|
||||
android:name="primary"
|
||||
android:fillColor="#DBE5F6"
|
||||
android:pathData="M81.25,136.08H118.75V173.58H81.25V136.08Z" />
|
||||
<path
|
||||
android:name="outline"
|
||||
android:fillColor="#020F66"
|
||||
android:fillType="evenOdd"
|
||||
android:pathData="M79.17,134H120.83V171.5H137.5C138.65,171.5 139.58,172.43 139.58,173.58C139.58,174.73 138.65,175.67 137.5,175.67H62.5C61.35,175.67 60.42,174.73 60.42,173.58C60.42,172.43 61.35,171.5 62.5,171.5H79.17V134ZM83.33,171.5H116.67V138.17H83.33V171.5Z" />
|
||||
<path
|
||||
android:name="tertiary"
|
||||
android:fillColor="#ffffff"
|
||||
android:pathData="M0,100.67C0,96.06 3.73,92.33 8.33,92.33H45.83C50.44,92.33 54.17,96.06 54.17,100.67V167.33C54.17,171.93 50.44,175.67 45.83,175.67H8.33C3.73,175.67 0,171.93 0,167.33V100.67Z" />
|
||||
<path
|
||||
android:name="outline"
|
||||
android:fillColor="#020F66"
|
||||
android:fillType="evenOdd"
|
||||
android:pathData="M45.83,96.5H8.33C6.03,96.5 4.17,98.37 4.17,100.67V167.33C4.17,169.63 6.03,171.5 8.33,171.5H45.83C48.13,171.5 50,169.63 50,167.33V100.67C50,98.37 48.13,96.5 45.83,96.5ZM8.33,92.33C3.73,92.33 0,96.06 0,100.67V167.33C0,171.93 3.73,175.67 8.33,175.67H45.83C50.44,175.67 54.17,171.93 54.17,167.33V100.67C54.17,96.06 50.44,92.33 45.83,92.33H8.33Z" />
|
||||
<path
|
||||
android:name="outline"
|
||||
android:fillColor="#020F66"
|
||||
android:fillType="evenOdd"
|
||||
android:pathData="M20.83,102.75C20.83,101.6 21.77,100.67 22.92,100.67L31.25,100.67C32.4,100.67 33.33,101.6 33.33,102.75C33.33,103.9 32.4,104.83 31.25,104.83L22.92,104.83C21.77,104.83 20.83,103.9 20.83,102.75Z" />
|
||||
<path
|
||||
android:name="primary"
|
||||
android:fillColor="#DBE5F6"
|
||||
android:fillType="evenOdd"
|
||||
android:pathData="M100,115.25C118.41,115.25 133.33,100.33 133.33,81.92C133.33,63.51 118.41,48.58 100,48.58C81.59,48.58 66.67,63.51 66.67,81.92C66.67,100.33 81.59,115.25 100,115.25ZM85.42,69.42C81.96,69.42 79.17,72.21 79.17,75.67V96.5C79.17,99.95 81.96,102.75 85.42,102.75H114.58C118.03,102.75 120.83,99.95 120.83,96.5V75.67C120.83,72.21 118.03,69.42 114.58,69.42H85.42Z" />
|
||||
<path
|
||||
android:name="accent"
|
||||
android:fillColor="#FFBF00"
|
||||
android:pathData="M79.17,75.67C79.17,72.21 81.96,69.42 85.42,69.42H114.58C118.03,69.42 120.83,72.21 120.83,75.67V96.5C120.83,99.95 118.03,102.75 114.58,102.75H85.42C81.96,102.75 79.17,99.95 79.17,96.5V75.67Z" />
|
||||
<path
|
||||
android:name="outline"
|
||||
android:fillColor="#020F66"
|
||||
android:fillType="evenOdd"
|
||||
android:pathData="M114.58,73.58H85.42C84.27,73.58 83.33,74.52 83.33,75.67V96.5C83.33,97.65 84.27,98.58 85.42,98.58H114.58C115.73,98.58 116.67,97.65 116.67,96.5V75.67C116.67,74.52 115.73,73.58 114.58,73.58ZM85.42,69.42C81.96,69.42 79.17,72.21 79.17,75.67V96.5C79.17,99.95 81.96,102.75 85.42,102.75H114.58C118.03,102.75 120.83,99.95 120.83,96.5V75.67C120.83,72.21 118.03,69.42 114.58,69.42H85.42Z" />
|
||||
<path
|
||||
android:name="outline"
|
||||
android:fillColor="#020F66"
|
||||
android:pathData="M97.92,81.92C97.92,80.77 98.85,79.83 100,79.83C101.15,79.83 102.08,80.77 102.08,81.92V90.25C102.08,91.4 101.15,92.33 100,92.33C98.85,92.33 97.92,91.4 97.92,90.25V81.92Z" />
|
||||
<path
|
||||
android:name="outline"
|
||||
android:fillColor="#020F66"
|
||||
android:fillType="evenOdd"
|
||||
android:pathData="M89.58,67.33C89.58,61.58 94.25,56.92 100,56.92C105.75,56.92 110.42,61.58 110.42,67.33V69.42H106.25V67.33C106.25,63.88 103.45,61.08 100,61.08C96.55,61.08 93.75,63.88 93.75,67.33V69.42H89.58V67.33Z" />
|
||||
<path
|
||||
android:name="tertiary"
|
||||
android:fillColor="#ffffff"
|
||||
android:pathData="M125,84C125,79.4 128.73,75.67 133.33,75.67H191.67C196.27,75.67 200,79.4 200,84V167.33C200,171.94 196.27,175.67 191.67,175.67H133.33C128.73,175.67 125,171.94 125,167.33V84Z" />
|
||||
<path
|
||||
android:name="outline"
|
||||
android:fillColor="#020F66"
|
||||
android:fillType="evenOdd"
|
||||
android:pathData="M191.67,79.83H133.33C131.03,79.83 129.17,81.7 129.17,84V167.33C129.17,169.63 131.03,171.5 133.33,171.5H191.67C193.97,171.5 195.83,169.63 195.83,167.33V84C195.83,81.7 193.97,79.83 191.67,79.83ZM133.33,75.67C128.73,75.67 125,79.4 125,84V167.33C125,171.94 128.73,175.67 133.33,175.67H191.67C196.27,175.67 200,171.94 200,167.33V84C200,79.4 196.27,75.67 191.67,75.67H133.33Z" />
|
||||
<path
|
||||
android:name="secondary"
|
||||
android:fillColor="#AAC3EF"
|
||||
android:pathData="M168.75,159C168.75,162.45 165.95,165.25 162.5,165.25C159.05,165.25 156.25,162.45 156.25,159C156.25,155.55 159.05,152.75 162.5,152.75C165.95,152.75 168.75,155.55 168.75,159Z" />
|
||||
<path
|
||||
android:name="outline"
|
||||
android:fillColor="#020F66"
|
||||
android:fillType="evenOdd"
|
||||
android:pathData="M162.5,161.08C163.65,161.08 164.58,160.15 164.58,159C164.58,157.85 163.65,156.92 162.5,156.92C161.35,156.92 160.42,157.85 160.42,159C160.42,160.15 161.35,161.08 162.5,161.08ZM162.5,165.25C165.95,165.25 168.75,162.45 168.75,159C168.75,155.55 165.95,152.75 162.5,152.75C159.05,152.75 156.25,155.55 156.25,159C156.25,162.45 159.05,165.25 162.5,165.25Z" />
|
||||
<path
|
||||
android:name="secondary"
|
||||
android:fillColor="#AAC3EF"
|
||||
android:pathData="M83.33,138.17H116.67V150.67H83.33V138.17Z" />
|
||||
</group>
|
||||
</vector>
|
||||