PM-12322: Update color scheme (#3986)

This commit is contained in:
David Perez 2024-10-04 08:47:28 -05:00 committed by GitHub
parent 1d84479cf3
commit 3dfe6adc05
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
149 changed files with 1133 additions and 1161 deletions

View file

@ -15,7 +15,6 @@ import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
@ -221,14 +220,14 @@ private fun OrderedHeaderContent() {
Text(
text = stringResource(R.string.turn_on_autofill),
style = BitwardenTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = stringResource(R.string.use_autofill_to_log_into_your_accounts),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center,
// Apply similar line breaks to design
modifier = Modifier.sizeIn(maxWidth = 300.dp),

View file

@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
@ -92,7 +91,7 @@ private fun SetupCompleteContent(
Text(
text = stringResource(R.string.youre_all_set),
style = BitwardenTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center,
modifier = Modifier
.align(CenterHorizontally)
@ -102,7 +101,7 @@ private fun SetupCompleteContent(
Text(
text = stringResource(R.string.what_bitwarden_has_to_offer),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center,
modifier = Modifier
.align(CenterHorizontally)

View file

@ -16,7 +16,6 @@ import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -229,7 +228,7 @@ private fun ColumnScope.SetupUnlockHeaderPortrait() {
Text(
text = stringResource(id = R.string.set_up_unlock),
style = BitwardenTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center,
modifier = Modifier
.fillMaxWidth()
@ -243,7 +242,7 @@ private fun ColumnScope.SetupUnlockHeaderPortrait() {
id = R.string.set_up_biometrics_or_choose_a_pin_code_to_quickly_access_your_vault_and_autofill_your_logins,
),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center,
modifier = Modifier
.fillMaxWidth()
@ -275,7 +274,7 @@ private fun SetupUnlockHeaderLandscape(
Text(
text = stringResource(id = R.string.set_up_unlock),
style = BitwardenTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth(),
)
@ -287,7 +286,7 @@ private fun SetupUnlockHeaderLandscape(
id = R.string.set_up_biometrics_or_choose_a_pin_code_to_quickly_access_your_vault_and_autofill_your_logins,
),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth(),
)

View file

@ -15,7 +15,6 @@ import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.ClickableText
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -151,7 +150,7 @@ private fun CheckEmailContent(
text = stringResource(id = R.string.check_your_email),
textAlign = TextAlign.Center,
style = BitwardenTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.padding(horizontal = 8.dp)
.wrapContentHeight()
@ -166,7 +165,7 @@ private fun CheckEmailContent(
),
highlights = listOf(email),
highlightStyle = SpanStyle(
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
fontSize = BitwardenTheme.typography.bodyMedium.fontSize,
fontWeight = FontWeight.Bold,
),
@ -186,7 +185,7 @@ private fun CheckEmailContent(
Text(
text = stringResource(R.string.select_the_link_in_the_email_to_verify_your_email_address_and_continue_creating_your_account),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center,
modifier = Modifier
.padding(horizontal = 8.dp)
@ -226,7 +225,7 @@ private fun CheckEmailLegacyContent(
Spacer(modifier = Modifier.height(32.dp))
Image(
painter = rememberVectorPainter(id = R.drawable.email_check),
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary),
colorFilter = ColorFilter.tint(BitwardenTheme.colorScheme.icon.secondary),
contentDescription = null,
contentScale = ContentScale.FillHeight,
modifier = Modifier
@ -239,7 +238,7 @@ private fun CheckEmailLegacyContent(
text = stringResource(id = R.string.check_your_email),
textAlign = TextAlign.Center,
style = BitwardenTheme.typography.headlineSmall,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.padding(horizontal = 24.dp)
.wrapContentHeight()
@ -255,7 +254,7 @@ private fun CheckEmailLegacyContent(
),
highlights = listOf(email),
highlightStyle = SpanStyle(
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
fontSize = BitwardenTheme.typography.bodyMedium.fontSize,
fontWeight = FontWeight.Bold,
),

View file

@ -17,7 +17,6 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -142,8 +141,8 @@ fun CompleteRegistrationScreen(
BitwardenTopAppBar(
title = stringResource(
id = R.string.create_account
.takeIf { state.onboardingEnabled }
?: R.string.set_password),
.takeIf { state.onboardingEnabled }
?: R.string.set_password),
scrollBehavior = scrollBehavior,
navigationIcon = rememberVectorPainter(id = R.drawable.ic_back),
navigationIconContentDescription = stringResource(id = R.string.back),
@ -362,7 +361,7 @@ private fun LegacyHeaderContent(
userEmail,
),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = modifier
.fillMaxWidth(),
)
@ -386,7 +385,7 @@ private fun OrderedHeaderContent() {
Text(
text = stringResource(R.string.choose_your_master_password),
style = BitwardenTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(8.dp))
@ -395,7 +394,7 @@ private fun OrderedHeaderContent() {
R.string.choose_a_unique_and_strong_password_to_keep_your_information_safe,
),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center,
)
}

View file

@ -15,7 +15,6 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@ -31,7 +30,6 @@ import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.asText
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import com.x8bit.bitwarden.ui.platform.theme.LocalNonMaterialColors
/**
* Draws a password indicator that displays password strength based on the given [state].
@ -56,12 +54,12 @@ fun PasswordStrengthIndicator(
label = "Width Percent State",
)
val indicatorColor = when (state) {
PasswordStrengthState.NONE -> MaterialTheme.colorScheme.error
PasswordStrengthState.WEAK_1 -> MaterialTheme.colorScheme.error
PasswordStrengthState.WEAK_2 -> MaterialTheme.colorScheme.error
PasswordStrengthState.WEAK_3 -> LocalNonMaterialColors.current.passwordWeak
PasswordStrengthState.GOOD -> MaterialTheme.colorScheme.primary
PasswordStrengthState.STRONG -> LocalNonMaterialColors.current.passwordStrong
PasswordStrengthState.NONE -> BitwardenTheme.colorScheme.status.error
PasswordStrengthState.WEAK_1 -> BitwardenTheme.colorScheme.status.error
PasswordStrengthState.WEAK_2 -> BitwardenTheme.colorScheme.status.weak2
PasswordStrengthState.WEAK_3 -> BitwardenTheme.colorScheme.status.weak2
PasswordStrengthState.GOOD -> BitwardenTheme.colorScheme.status.good
PasswordStrengthState.STRONG -> BitwardenTheme.colorScheme.status.strong
}
val animatedIndicatorColor by animateColorAsState(
targetValue = indicatorColor,
@ -82,7 +80,7 @@ fun PasswordStrengthIndicator(
Modifier
.fillMaxWidth()
.height(4.dp)
.background(MaterialTheme.colorScheme.surfaceContainerHigh),
.background(BitwardenTheme.colorScheme.sliderButton.unfilled),
) {
Box(
modifier = Modifier
@ -124,12 +122,11 @@ private fun MinimumCharacterCount(
minimumRequirementMet: Boolean,
minimumCharacterCount: Int,
) {
val nonMaterialColors = LocalNonMaterialColors.current
val characterCountColor by animateColorAsState(
targetValue = if (minimumRequirementMet) {
nonMaterialColors.passwordStrong
BitwardenTheme.colorScheme.status.strong
} else {
MaterialTheme.colorScheme.surfaceDim
BitwardenTheme.colorScheme.text.secondary
},
label = "minmumCharacterCountColor",
)

View file

@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
@ -77,6 +76,7 @@ import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField
import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
import com.x8bit.bitwarden.ui.platform.components.text.BitwardenClickableText
import com.x8bit.bitwarden.ui.platform.components.toggle.BitwardenSwitch
import com.x8bit.bitwarden.ui.platform.components.toggle.color.bitwardenSwitchColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.composition.LocalIntentManager
import com.x8bit.bitwarden.ui.platform.manager.intent.IntentManager
@ -309,7 +309,9 @@ private fun TermsAndPrivacySwitch(
}
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary),
indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = { onCheckedChange.invoke(!isChecked) },
)
.padding(start = 16.dp)
@ -321,12 +323,13 @@ private fun TermsAndPrivacySwitch(
.width(52.dp),
checked = isChecked,
onCheckedChange = null,
colors = bitwardenSwitchColors(),
)
Column(Modifier.padding(start = 16.dp, top = 4.dp, bottom = 4.dp)) {
Text(
text = stringResource(id = R.string.accept_policies),
style = BitwardenTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
)
FlowRow(
horizontalArrangement = Arrangement.Start,
@ -340,12 +343,11 @@ private fun TermsAndPrivacySwitch(
onClick = onTermsClick,
style = BitwardenTheme.typography.bodyMedium,
innerPadding = PaddingValues(vertical = 4.dp, horizontal = 0.dp),
color = MaterialTheme.colorScheme.primary,
)
Text(
text = ",",
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.primary,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.padding(vertical = 4.dp),
)
Spacer(modifier = Modifier.width(4.dp))
@ -354,7 +356,6 @@ private fun TermsAndPrivacySwitch(
onClick = onPrivacyPolicyClick,
style = BitwardenTheme.typography.bodyMedium,
innerPadding = PaddingValues(vertical = 4.dp, horizontal = 0.dp),
color = MaterialTheme.colorScheme.primary,
)
}
}

View file

@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -157,7 +156,7 @@ private fun EnterpriseSignOnScreenContent(
text = stringResource(id = R.string.log_in_sso_summary),
textAlign = TextAlign.Start,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),

View file

@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
@ -108,7 +107,7 @@ private fun ExpiredRegistrationLinkContent(
Text(
text = stringResource(R.string.expired_link),
style = BitwardenTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center,
modifier = Modifier
.fillMaxWidth()
@ -118,7 +117,7 @@ private fun ExpiredRegistrationLinkContent(
Text(
text = stringResource(R.string.please_restart_registration_or_try_logging_in),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center,
modifier = Modifier
.fillMaxWidth()

View file

@ -16,7 +16,6 @@ import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -221,7 +220,7 @@ private fun LandingScreenContent(
Image(
painter = rememberVectorPainter(id = R.drawable.logo),
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary),
colorFilter = ColorFilter.tint(BitwardenTheme.colorScheme.icon.secondary),
contentDescription = null,
modifier = Modifier
.padding(horizontal = 16.dp)
@ -238,7 +237,7 @@ private fun LandingScreenContent(
text = stringResource(id = R.string.login_or_create_new_account),
textAlign = TextAlign.Center,
style = BitwardenTheme.typography.headlineSmall,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.padding(horizontal = 24.dp)
.wrapContentHeight(),
@ -306,7 +305,7 @@ private fun LandingScreenContent(
Text(
text = stringResource(id = R.string.new_around_here),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
)
BitwardenTextButton(

View file

@ -13,7 +13,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -307,7 +306,7 @@ private fun LoginScreenContent(
),
textAlign = TextAlign.Start,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.testTag("LoggingInAsLabel")
.padding(horizontal = 16.dp)

View file

@ -16,7 +16,6 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -48,7 +47,6 @@ import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.composition.LocalIntentManager
import com.x8bit.bitwarden.ui.platform.manager.intent.IntentManager
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import com.x8bit.bitwarden.ui.platform.theme.LocalNonMaterialColors
/**
* The top level composable for the Login with Device screen.
@ -146,7 +144,7 @@ private fun LoginWithDeviceScreenContent(
text = state.title(),
textAlign = TextAlign.Start,
style = BitwardenTheme.typography.headlineMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),
@ -158,7 +156,7 @@ private fun LoginWithDeviceScreenContent(
text = state.subtitle(),
textAlign = TextAlign.Start,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),
@ -170,7 +168,7 @@ private fun LoginWithDeviceScreenContent(
text = state.description(),
textAlign = TextAlign.Start,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),
@ -182,7 +180,7 @@ private fun LoginWithDeviceScreenContent(
text = stringResource(id = R.string.fingerprint_phrase),
textAlign = TextAlign.Start,
style = BitwardenTheme.typography.titleLarge,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),
@ -193,7 +191,7 @@ private fun LoginWithDeviceScreenContent(
Text(
text = state.fingerprintPhrase,
textAlign = TextAlign.Start,
color = LocalNonMaterialColors.current.fingerprint,
color = BitwardenTheme.colorScheme.text.codePink,
style = BitwardenTheme.typography.sensitiveInfoSmall,
minLines = 2,
modifier = Modifier
@ -233,7 +231,7 @@ private fun LoginWithDeviceScreenContent(
text = state.otherOptions(),
textAlign = TextAlign.Start,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),

View file

@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SnackbarDuration
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
@ -166,12 +165,11 @@ private fun MasterPasswordGeneratorContent(
Text(
text = stringResource(R.string.write_this_password_down_and_keep_it_somewhere_safe),
style = BitwardenTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
)
BitwardenClickableText(
label = stringResource(R.string.learn_about_other_ways_to_prevent_account_lockout),
style = BitwardenTheme.typography.labelMedium,
color = MaterialTheme.colorScheme.primary,
onClick = onLearnToPreventLockout,
innerPadding = PaddingValues(horizontal = 0.dp, vertical = 4.dp),
)
@ -194,7 +192,6 @@ private fun MasterPasswordGeneratorTopBar(
actions = {
BitwardenTextButton(
label = stringResource(id = R.string.save),
labelTextColor = MaterialTheme.colorScheme.primary,
onClick = onSaveClick,
)
},

View file

@ -15,7 +15,6 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -93,7 +92,7 @@ fun MasterPasswordGuidanceScreen(
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(size = 4.dp))
.background(MaterialTheme.colorScheme.surfaceContainerLowest),
.background(BitwardenTheme.colorScheme.background.tertiary),
) {
Column(
modifier = Modifier
@ -104,18 +103,18 @@ fun MasterPasswordGuidanceScreen(
Text(
text = stringResource(R.string.what_makes_a_password_strong),
style = BitwardenTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
)
Spacer(modifier = Modifier.height(8.dp))
Text(
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
text = stringResource(
R.string.the_longer_your_password_the_more_difficult_to_hack,
),
)
}
BitwardenHorizontalDivider(color = MaterialTheme.colorScheme.outline)
BitwardenHorizontalDivider()
Column(
modifier = Modifier
.fillMaxWidth()
@ -124,7 +123,7 @@ fun MasterPasswordGuidanceScreen(
Text(
text = stringResource(R.string.the_strongest_passwords_are_usually),
style = BitwardenTheme.typography.titleSmall,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
)
Spacer(modifier = Modifier.height(8.dp))
BulletTextRow(text = stringResource(R.string.twelve_or_more_characters))
@ -171,7 +170,7 @@ private fun TryGeneratorCard(
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_navigate_next),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurfaceVariant,
tint = BitwardenTheme.colorScheme.icon.primary,
modifier = Modifier
.align(Alignment.Center)
.size(16.dp),
@ -194,13 +193,13 @@ private fun BulletTextRow(
text = BULLET_TWO_TAB,
textAlign = TextAlign.Center,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.clearAndSetSemantics { },
)
Text(
text = text,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
)
}
}

View file

@ -132,6 +132,7 @@ fun MasterPasswordHintScreen(
Text(
text = stringResource(id = R.string.enter_email_for_hint),
style = BitwardenTheme.typography.bodySmall,
color = BitwardenTheme.colorScheme.text.secondary,
modifier = Modifier
.fillMaxWidth()
.padding(

View file

@ -16,7 +16,6 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -97,14 +96,13 @@ private fun NeverLoseAccessContent(
modifier = modifier
.fillMaxWidth()
.clip(RoundedCornerShape(size = 4.dp))
.background(MaterialTheme.colorScheme.surfaceContainerLowest),
.background(BitwardenTheme.colorScheme.background.tertiary),
) {
Spacer(modifier = Modifier.height(24.dp))
Text(
text = stringResource(R.string.never_lose_access_to_your_vault),
style = BitwardenTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.padding(horizontal = 24.dp),
)
Spacer(modifier = Modifier.height(8.dp))
@ -113,11 +111,11 @@ private fun NeverLoseAccessContent(
R.string.the_best_way_to_make_sure_you_can_always_access_your_account,
),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.padding(horizontal = 24.dp),
)
Spacer(modifier = Modifier.height(24.dp))
BitwardenHorizontalDivider(color = MaterialTheme.colorScheme.outline)
BitwardenHorizontalDivider()
Spacer(modifier = Modifier.height(16.dp))
AccountRecoveryTipRow(
title = stringResource(R.string.create_a_hint),
@ -128,7 +126,7 @@ private fun NeverLoseAccessContent(
modifier = Modifier.padding(horizontal = 16.dp),
)
Spacer(modifier = Modifier.height(16.dp))
BitwardenHorizontalDivider(color = MaterialTheme.colorScheme.outline)
BitwardenHorizontalDivider()
Spacer(modifier = Modifier.height(16.dp))
AccountRecoveryTipRow(
title = stringResource(R.string.write_your_password_down),
@ -154,7 +152,7 @@ private fun AccountRecoveryTipRow(
Icon(
painter = icon,
contentDescription = null,
tint = MaterialTheme.colorScheme.primary,
tint = BitwardenTheme.colorScheme.icon.primary,
modifier = Modifier
.size(32.dp)
.clearAndSetSemantics { },
@ -164,13 +162,13 @@ private fun AccountRecoveryTipRow(
Text(
text = title,
style = BitwardenTheme.typography.titleSmall,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
)
Spacer(modifier = Modifier.height(4.dp))
Text(
text = description,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
)
}
}

View file

@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -98,7 +97,7 @@ private fun RemovePasswordScreenContent(
Text(
text = state.description(),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.standardHorizontalMargin()
.fillMaxWidth(),

View file

@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -25,6 +24,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
@ -122,7 +122,7 @@ private fun SetPasswordScreenContent(
id = R.string.your_organization_requires_you_to_set_a_master_password,
),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),
@ -132,6 +132,7 @@ private fun SetPasswordScreenContent(
BitwardenPolicyWarningText(
text = stringResource(id = R.string.reset_password_auto_enroll_invite_warning),
textAlign = TextAlign.Start,
style = BitwardenTheme.typography.bodyMedium,
modifier = Modifier
.padding(horizontal = 16.dp)

View file

@ -21,7 +21,6 @@ import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.ClickableText
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -73,6 +72,7 @@ import com.x8bit.bitwarden.ui.platform.components.dialog.LoadingDialogState
import com.x8bit.bitwarden.ui.platform.components.dropdown.EnvironmentSelector
import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField
import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
import com.x8bit.bitwarden.ui.platform.components.toggle.color.bitwardenSwitchColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.composition.LocalIntentManager
import com.x8bit.bitwarden.ui.platform.manager.intent.IntentManager
@ -267,7 +267,7 @@ private fun StartRegistrationContent(
vectorIconRes = R.drawable.ic_tooltip_small,
contentDescription = stringResource(R.string.help_with_server_geolocations),
onClick = handler.onServerGeologyHelpClick,
contentColor = MaterialTheme.colorScheme.primary,
contentColor = BitwardenTheme.colorScheme.icon.secondary,
// Align with design but keep accessible touch target of IconButton.
modifier = Modifier.offset(y = (-8f).dp, x = 16.dp),
)
@ -324,7 +324,7 @@ private fun TermsAndPrivacyText(
append(strTermsAndPrivacy)
addStyle(
style = SpanStyle(
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
fontSize = BitwardenTheme.typography.bodyMedium.fontSize,
),
start = 0,
@ -332,7 +332,7 @@ private fun TermsAndPrivacyText(
)
addStyle(
style = SpanStyle(
color = MaterialTheme.colorScheme.primary,
color = BitwardenTheme.colorScheme.text.interaction,
fontSize = BitwardenTheme.typography.bodyMedium.fontSize,
fontWeight = FontWeight.Bold,
),
@ -341,7 +341,7 @@ private fun TermsAndPrivacyText(
)
addStyle(
style = SpanStyle(
color = MaterialTheme.colorScheme.primary,
color = BitwardenTheme.colorScheme.text.interaction,
fontSize = BitwardenTheme.typography.bodyMedium.fontSize,
fontWeight = FontWeight.Bold,
),
@ -423,6 +423,11 @@ private fun ReceiveMarketingEmailsSwitch(
mainString = stringResource(id = R.string.get_emails_from_bitwarden_for_announcements_advices_and_research_opportunities_unsubscribe_any_time),
highlights = listOf(unsubscribeString),
tag = TAG_URL,
highlightStyle = SpanStyle(
color = BitwardenTheme.colorScheme.text.interaction,
fontSize = BitwardenTheme.typography.bodyMedium.fontSize,
fontWeight = FontWeight.Bold,
),
)
Row(
horizontalArrangement = Arrangement.Start,
@ -443,7 +448,9 @@ private fun ReceiveMarketingEmailsSwitch(
}
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary),
indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = { onCheckedChange.invoke(!isChecked) },
)
.fillMaxWidth(),
@ -454,6 +461,7 @@ private fun ReceiveMarketingEmailsSwitch(
.width(52.dp),
checked = isChecked,
onCheckedChange = null,
colors = bitwardenSwitchColors(),
)
Spacer(modifier = Modifier.width(16.dp))
ClickableText(

View file

@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -186,7 +185,7 @@ private fun TrustedDeviceScaffold(
state.environmentLabel,
),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.secondary,
modifier = Modifier
.testTag("LoggingInAsLabel")
.padding(horizontal = 16.dp)

View file

@ -13,7 +13,6 @@ import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -225,7 +224,7 @@ private fun TwoFactorLoginScreenContent(
text = state.authMethod.description(state.displayEmail)(),
textAlign = TextAlign.Start,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),

View file

@ -14,7 +14,6 @@ import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
@ -240,7 +239,7 @@ fun VaultUnlockScreen(
Text(
text = state.vaultUnlockType.unlockScreenMessage(),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),
@ -254,7 +253,7 @@ fun VaultUnlockScreen(
state.environmentUrl,
),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.testTag("UserAndEnvironmentDataLabel")
.padding(horizontal = 16.dp)
@ -277,7 +276,7 @@ fun VaultUnlockScreen(
text = stringResource(R.string.account_biometric_invalidated),
textAlign = TextAlign.Start,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.error,
color = BitwardenTheme.colorScheme.status.error,
modifier = Modifier.padding(horizontal = 16.dp),
)
Spacer(modifier = Modifier.height(12.dp))

View file

@ -22,7 +22,6 @@ import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
@ -78,6 +77,8 @@ fun WelcomeScreen(
BitwardenScaffold(
modifier = Modifier.fillMaxSize(),
containerColor = BitwardenTheme.colorScheme.background.secondary,
contentColor = BitwardenTheme.colorScheme.text.secondary,
) { innerPadding ->
WelcomeScreenContent(
state = state,
@ -191,7 +192,7 @@ private fun WelcomeCardLandscape(
text = stringResource(id = state.titleRes),
textAlign = TextAlign.Center,
style = BitwardenTheme.typography.headlineMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.padding(bottom = 16.dp),
)
@ -199,7 +200,7 @@ private fun WelcomeCardLandscape(
text = stringResource(id = state.messageRes),
textAlign = TextAlign.Center,
style = BitwardenTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
)
}
}
@ -224,7 +225,7 @@ private fun WelcomeCardPortrait(
text = stringResource(id = state.titleRes),
textAlign = TextAlign.Center,
style = BitwardenTheme.typography.headlineMedium,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.padding(
top = 48.dp,
@ -236,7 +237,7 @@ private fun WelcomeCardPortrait(
text = stringResource(id = state.messageRes),
textAlign = TextAlign.Center,
style = BitwardenTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
)
}
}
@ -255,11 +256,9 @@ private fun IndicatorDots(
) {
items(totalCount) { index ->
val color = animateColorAsState(
targetValue = if (index == selectedIndexProvider()) {
MaterialTheme.colorScheme.onSurface
} else {
MaterialTheme.colorScheme.onSurface.copy(alpha = 0.3f)
},
targetValue = BitwardenTheme.colorScheme.text.primary.copy(
alpha = if (index == selectedIndexProvider()) 1.0f else 0.3f,
),
label = "dotColor",
)

View file

@ -3,11 +3,16 @@ package com.x8bit.bitwarden.ui.autofill
import android.content.Context
import android.widget.RemoteViews
import androidx.annotation.DrawableRes
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.data.autofill.model.AutofillAppInfo
import com.x8bit.bitwarden.data.autofill.model.AutofillCipher
import com.x8bit.bitwarden.ui.autofill.util.getAutofillSuggestionContentDescription
import com.x8bit.bitwarden.ui.autofill.util.isSystemDarkMode
import com.x8bit.bitwarden.ui.platform.theme.color.BitwardenColorScheme
import com.x8bit.bitwarden.ui.platform.theme.color.darkBitwardenColorScheme
import com.x8bit.bitwarden.ui.platform.theme.color.lightBitwardenColorScheme
/**
* Build [RemoteViews] for representing an autofill suggestion.
@ -85,37 +90,31 @@ private fun buildAutofillRemoteViews(
setInt(
R.id.container,
"setBackgroundColor",
autofillAppInfo.context.surface,
autofillAppInfo.context.background.toArgb(),
)
setInt(
R.id.title,
"setTextColor",
autofillAppInfo.context.onSurface,
autofillAppInfo.context.primaryText.toArgb(),
)
setInt(
R.id.subtitle,
"setTextColor",
autofillAppInfo.context.onSurfaceVariant,
autofillAppInfo.context.secondaryText.toArgb(),
)
if (shouldTintIcon) {
setInt(
R.id.icon,
"setColorFilter",
autofillAppInfo.context.onSurface,
autofillAppInfo.context.iconTint.toArgb(),
)
}
}
private val Context.onSurface: Int
get() = getColor(
if (isSystemDarkMode) R.color.dark_on_surface else R.color.on_surface,
)
private val Context.onSurfaceVariant: Int
get() = getColor(
if (isSystemDarkMode) R.color.dark_on_surface_variant else R.color.on_surface_variant,
)
private val Context.bitwardenColorScheme: BitwardenColorScheme
get() = if (isSystemDarkMode) darkBitwardenColorScheme else lightBitwardenColorScheme
private val Context.surface: Int
get() = getColor(
if (isSystemDarkMode) R.color.dark_surface else R.color.surface,
)
val Context.iconTint: Color get() = bitwardenColorScheme.icon.primary
private val Context.primaryText: Color get() = bitwardenColorScheme.text.primary
private val Context.secondaryText: Color get() = bitwardenColorScheme.text.secondary
private val Context.background: Color get() = bitwardenColorScheme.background.primary

View file

@ -12,9 +12,11 @@ import androidx.annotation.DrawableRes
import androidx.annotation.RequiresApi
import androidx.autofill.inline.UiVersions
import androidx.autofill.inline.v1.InlineSuggestionUi
import androidx.compose.ui.graphics.toArgb
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.data.autofill.model.AutofillAppInfo
import com.x8bit.bitwarden.data.autofill.model.AutofillCipher
import com.x8bit.bitwarden.ui.autofill.iconTint
/**
* Try creating an [InlinePresentation] for [autofillCipher] with this [InlinePresentationSpec]. If
@ -91,7 +93,7 @@ private fun InlinePresentationSpec.createInlinePresentationOrNull(
)
.run {
if (shouldTintIcon) {
setTint(autofillAppInfo.contentColor)
setTint(autofillAppInfo.context.iconTint.toArgb())
} else {
// Remove tinting
setTintBlendMode(BlendMode.DST)
@ -121,17 +123,3 @@ private fun InlinePresentationSpec.createInlinePresentationOrNull(
false,
)
}
/**
* Get the content color for the inline presentation.
*/
private val AutofillAppInfo.contentColor: Int
get() {
val colorRes = if (context.isSystemDarkMode) {
R.color.dark_on_surface
} else {
R.color.on_surface
}
return context.getColor(colorRes)
}

View file

@ -1,10 +1,10 @@
package com.x8bit.bitwarden.ui.platform.base.util
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Stable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.luminance
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* A fractional luminance value beyond which we will consider the associated color to be light
@ -37,8 +37,8 @@ private val Color.luminanceWcag1: Float
*/
@Composable
fun Color.toSafeOverlayColor(): Color {
val surfaceColor = MaterialTheme.colorScheme.surface
val onSurfaceColor = MaterialTheme.colorScheme.onSurface
val surfaceColor = BitwardenTheme.colorScheme.background.primary
val onSurfaceColor = BitwardenTheme.colorScheme.text.primary
val lightColor: Color
val darkColor: Color
if (surfaceColor.luminance() > onSurfaceColor.luminance()) {

View file

@ -3,7 +3,6 @@ package com.x8bit.bitwarden.ui.platform.base.util
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.DividerDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Stable
@ -28,6 +27,7 @@ import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.data.platform.annotation.OmitFromCoverage
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import com.x8bit.bitwarden.ui.platform.util.isPortrait
/**
@ -41,8 +41,8 @@ import com.x8bit.bitwarden.ui.platform.util.isPortrait
fun Modifier.scrolledContainerBackground(
topAppBarScrollBehavior: TopAppBarScrollBehavior,
): Modifier {
val expandedColor = MaterialTheme.colorScheme.surface
val collapsedColor = MaterialTheme.colorScheme.surfaceContainer
val expandedColor = BitwardenTheme.colorScheme.background.secondary
val collapsedColor = BitwardenTheme.colorScheme.background.secondary
return CombinedModifier(
outer = this,
inner = drawBehind {
@ -66,7 +66,7 @@ fun Modifier.bottomDivider(
paddingStart: Dp = 0.dp,
paddingEnd: Dp = 0.dp,
thickness: Dp = DividerDefaults.Thickness,
color: Color = DividerDefaults.color,
color: Color = BitwardenTheme.colorScheme.stroke.divider,
enabled: Boolean = true,
): Modifier = drawWithCache {
onDrawWithContent {

View file

@ -4,7 +4,6 @@ import android.content.res.Resources
import android.os.Parcelable
import androidx.annotation.PluralsRes
import androidx.annotation.StringRes
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Immutable
import androidx.compose.ui.platform.LocalContext
@ -135,7 +134,7 @@ fun createAnnotatedString(
mainString: String,
highlights: List<String>,
highlightStyle: SpanStyle = SpanStyle(
color = MaterialTheme.colorScheme.primary,
color = BitwardenTheme.colorScheme.text.interaction,
fontSize = BitwardenTheme.typography.bodyMedium.fontSize,
fontWeight = FontWeight.Bold,
),
@ -145,7 +144,7 @@ fun createAnnotatedString(
append(mainString)
addStyle(
style = SpanStyle(
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
fontSize = BitwardenTheme.typography.bodyMedium.fontSize,
),
start = 0,

View file

@ -7,7 +7,6 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
@ -18,7 +17,9 @@ import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.toSafeOverlayColor
import com.x8bit.bitwarden.ui.platform.base.util.toUnscaledTextUnit
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenStandardIconButtonColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Displays an icon representing a Bitwarden account with the user's initials superimposed.
@ -39,6 +40,7 @@ fun BitwardenAccountActionItem(
IconButton(
onClick = onClick,
colors = bitwardenStandardIconButtonColors(),
modifier = Modifier.testTag("CurrentActiveAccount"),
) {
Icon(
@ -62,12 +64,11 @@ fun BitwardenAccountActionItem(
@Preview(showBackground = true)
@Composable
private fun BitwardenAccountActionItem_preview() {
val mockInitials = "BW"
val mockColor = colorResource(id = R.color.primary)
BitwardenAccountActionItem(
initials = mockInitials,
color = mockColor,
onClick = {},
)
BitwardenTheme {
BitwardenAccountActionItem(
initials = "BW",
color = BitwardenTheme.colorScheme.icon.primary,
onClick = {},
)
}
}

View file

@ -23,7 +23,6 @@ import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.TopAppBarScrollBehavior
@ -274,7 +273,9 @@ private fun AccountSummaryItem(
.testTag("AccountCell")
.combinedClickable(
interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary),
indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = { onSwitchAccountClick(accountSummary) },
onLongClick = { onSwitchAccountLongClick(accountSummary) },
)
@ -317,7 +318,7 @@ private fun AccountSummaryItem(
Text(
text = accountSummary.environmentLabel,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.secondary,
modifier = Modifier.testTag("AccountEnvironmentLabel"),
)
@ -325,7 +326,7 @@ private fun AccountSummaryItem(
Text(
text = stringResource(id = supportingTextResId).lowercaseWithCurrentLocal(),
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.secondary,
modifier = Modifier.testTag("AccountStatusLabel"),
)
}
@ -336,7 +337,10 @@ private fun AccountSummaryItem(
Icon(
painter = rememberVectorPainter(id = accountSummary.iconRes),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface,
tint = when (accountSummary.status) {
AccountSummary.Status.ACTIVE -> BitwardenTheme.colorScheme.icon.secondary
else -> BitwardenTheme.colorScheme.icon.primary
},
modifier = Modifier
.testTag(accountSummary.iconTestTag)
.size(24.dp),
@ -396,7 +400,9 @@ private fun AddAccountItem(
modifier = Modifier
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary),
indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = onClick,
)
.padding(vertical = 8.dp)
@ -405,7 +411,7 @@ private fun AddAccountItem(
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_plus),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface,
tint = BitwardenTheme.colorScheme.icon.secondary,
modifier = Modifier
.padding(vertical = 8.dp)
.size(24.dp),
@ -416,6 +422,7 @@ private fun AddAccountItem(
Text(
text = stringResource(id = R.string.add_account),
style = BitwardenTheme.typography.bodyLarge,
color = BitwardenTheme.colorScheme.text.interaction,
)
}
}

View file

@ -2,7 +2,6 @@ package com.x8bit.bitwarden.ui.platform.components.account
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
@ -10,6 +9,7 @@ import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTag
import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenStandardIconButtonColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.feature.settings.appearance.model.AppTheme
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -25,18 +25,19 @@ fun BitwardenPlaceholderAccountActionItem(
) {
IconButton(
onClick = onClick,
colors = bitwardenStandardIconButtonColors(),
modifier = Modifier
.semantics(mergeDescendants = true) { testTag = "CurrentActiveAccount" },
) {
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_account_initials_container),
contentDescription = null,
tint = MaterialTheme.colorScheme.secondaryContainer,
tint = BitwardenTheme.colorScheme.background.tertiary,
)
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_dots),
contentDescription = stringResource(id = R.string.account),
tint = MaterialTheme.colorScheme.onSecondaryContainer,
tint = BitwardenTheme.colorScheme.text.interaction,
)
}
}

View file

@ -13,6 +13,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.appbar.color.bitwardenTopAppBarColors
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenStandardIconButton
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -40,13 +41,7 @@ fun BitwardenMediumTopAppBar(
actions: @Composable RowScope.() -> Unit = {},
) {
MediumTopAppBar(
colors = TopAppBarDefaults.largeTopAppBarColors(
containerColor = MaterialTheme.colorScheme.surface,
scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainer,
navigationIconContentColor = MaterialTheme.colorScheme.onSurface,
titleContentColor = MaterialTheme.colorScheme.onSurface,
actionIconContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
),
colors = bitwardenTopAppBarColors(),
scrollBehavior = scrollBehavior,
title = {
Text(
@ -76,7 +71,6 @@ private fun BitwardenMediumTopAppBar_preview() {
vectorIconRes = R.drawable.ic_more,
contentDescription = "",
onClick = { },
contentColor = MaterialTheme.colorScheme.onSurface,
)
},
)

View file

@ -3,12 +3,9 @@ package com.x8bit.bitwarden.ui.platform.components.appbar
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
@ -23,7 +20,9 @@ import androidx.compose.ui.text.input.ImeAction
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.mirrorIfRtl
import com.x8bit.bitwarden.ui.platform.base.util.tabNavigation
import com.x8bit.bitwarden.ui.platform.components.appbar.color.bitwardenTopAppBarColors
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenStandardIconButton
import com.x8bit.bitwarden.ui.platform.components.field.color.bitwardenTextFieldColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
@ -47,13 +46,7 @@ fun BitwardenSearchTopAppBar(
val focusRequester = remember { FocusRequester() }
TopAppBar(
modifier = modifier.testTag("HeaderBarComponent"),
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.surface,
scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainer,
navigationIconContentColor = MaterialTheme.colorScheme.onSurface,
titleContentColor = MaterialTheme.colorScheme.onSurface,
actionIconContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
),
colors = bitwardenTopAppBarColors(),
scrollBehavior = scrollBehavior,
navigationIcon = {
navigationIcon?.let {
@ -69,11 +62,9 @@ fun BitwardenSearchTopAppBar(
},
title = {
TextField(
colors = TextFieldDefaults.colors(
focusedContainerColor = Color.Transparent,
unfocusedContainerColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
colors = bitwardenTextFieldColors(
focusedBorderColor = Color.Transparent,
unfocusedBorderColor = Color.Transparent,
),
textStyle = BitwardenTheme.typography.bodyLarge,
placeholder = { Text(text = placeholder) },

View file

@ -2,7 +2,6 @@ package com.x8bit.bitwarden.ui.platform.components.appbar
import androidx.compose.foundation.layout.RowScope
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MediumTopAppBar
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
@ -22,6 +21,7 @@ import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.mirrorIfRtl
import com.x8bit.bitwarden.ui.platform.components.appbar.color.bitwardenTopAppBarColors
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenStandardIconButton
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -101,17 +101,9 @@ fun BitwardenTopAppBar(
}
}
val topAppBarColors = TopAppBarDefaults.largeTopAppBarColors(
containerColor = MaterialTheme.colorScheme.surface,
scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainer,
navigationIconContentColor = MaterialTheme.colorScheme.onSurface,
titleContentColor = MaterialTheme.colorScheme.onSurface,
actionIconContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
)
if (titleTextHasOverflow) {
MediumTopAppBar(
colors = topAppBarColors,
colors = bitwardenTopAppBarColors(),
scrollBehavior = scrollBehavior,
navigationIcon = navigationIconContent,
title = {
@ -129,7 +121,7 @@ fun BitwardenTopAppBar(
)
} else {
TopAppBar(
colors = topAppBarColors,
colors = bitwardenTopAppBarColors(),
scrollBehavior = scrollBehavior,
navigationIcon = navigationIconContent,
title = {

View file

@ -1,12 +1,10 @@
package com.x8bit.bitwarden.ui.platform.components.appbar.action
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@ -25,6 +23,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.appbar.color.bitwardenMenuItemColors
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenStandardIconButton
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import kotlinx.collections.immutable.ImmutableList
@ -62,13 +61,13 @@ fun BitwardenOverflowActionItem(
expanded = isOverflowMenuVisible,
onDismissRequest = { isOverflowMenuVisible = false },
offset = DpOffset(x = (-12).dp, y = 0.dp),
containerColor = BitwardenTheme.colorScheme.background.primary,
modifier = Modifier
.semantics { testTagsAsResourceId = true }
.widthIn(
min = 112.dp,
max = 280.dp,
)
.background(MaterialTheme.colorScheme.surfaceContainer),
),
content = {
menuItemDataList.forEach { dropdownMenuItemData ->
DropdownMenuItem(
@ -77,6 +76,7 @@ fun BitwardenOverflowActionItem(
testTag = it
}
},
colors = bitwardenMenuItemColors(),
text = {
Text(
text = dropdownMenuItemData.text,

View file

@ -0,0 +1,18 @@
package com.x8bit.bitwarden.ui.platform.components.appbar.color
import androidx.compose.material3.MenuItemColors
import androidx.compose.runtime.Composable
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Provides a default set of Bitwarden-styled colors for menu items.
*/
@Composable
fun bitwardenMenuItemColors(): MenuItemColors = MenuItemColors(
textColor = BitwardenTheme.colorScheme.text.primary,
leadingIconColor = BitwardenTheme.colorScheme.icon.primary,
trailingIconColor = BitwardenTheme.colorScheme.icon.primary,
disabledTextColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
disabledLeadingIconColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
disabledTrailingIconColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
)

View file

@ -0,0 +1,19 @@
package com.x8bit.bitwarden.ui.platform.components.appbar.color
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.TopAppBarColors
import androidx.compose.runtime.Composable
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Provides a default set of Bitwarden-styled colors for top app bars.
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun bitwardenTopAppBarColors(): TopAppBarColors = TopAppBarColors(
containerColor = BitwardenTheme.colorScheme.background.secondary,
scrolledContainerColor = BitwardenTheme.colorScheme.background.secondary,
navigationIconContentColor = BitwardenTheme.colorScheme.icon.primary,
titleContentColor = BitwardenTheme.colorScheme.text.primary,
actionIconContentColor = BitwardenTheme.colorScheme.icon.primary,
)

View file

@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Badge
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@ -18,7 +17,6 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import com.x8bit.bitwarden.ui.platform.theme.LocalNonMaterialColors
/**
* Reusable component for displaying a notification badge.
@ -30,8 +28,8 @@ fun NotificationBadge(
notificationCount: Int,
modifier: Modifier = Modifier,
isVisible: Boolean = true,
backgroundColor: Color = LocalNonMaterialColors.current.fingerprint,
contentColor: Color = MaterialTheme.colorScheme.onSecondary,
backgroundColor: Color = BitwardenTheme.colorScheme.icon.badgeBackground,
contentColor: Color = BitwardenTheme.colorScheme.icon.badgeForeground,
) {
AnimatedVisibility(
visible = isVisible,

View file

@ -2,13 +2,13 @@ package com.x8bit.bitwarden.ui.platform.components.button
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenFilledButtonColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
@ -34,7 +34,7 @@ fun BitwardenFilledButton(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = ButtonDefaults.buttonColors(),
colors = bitwardenFilledButtonColors(),
) {
Text(
text = label,

View file

@ -3,7 +3,6 @@ package com.x8bit.bitwarden.ui.platform.components.button
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@ -13,6 +12,7 @@ import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenFilledButtonColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -42,7 +42,7 @@ fun BitwardenFilledButtonWithIcon(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = ButtonDefaults.buttonColors(),
colors = bitwardenFilledButtonColors(),
) {
Icon(
painter = icon,

View file

@ -2,14 +2,13 @@ package com.x8bit.bitwarden.ui.platform.components.button
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenFilledErrorButtonColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
@ -35,10 +34,7 @@ fun BitwardenFilledErrorButton(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.error,
contentColor = MaterialTheme.colorScheme.onError,
),
colors = bitwardenFilledErrorButtonColors(),
) {
Text(
text = label,

View file

@ -3,13 +3,12 @@ package com.x8bit.bitwarden.ui.platform.components.button
import androidx.annotation.DrawableRes
import androidx.compose.material3.FilledIconButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenFilledIconButtonColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -33,12 +32,7 @@ fun BitwardenFilledIconButton(
FilledIconButton(
modifier = modifier.semantics(mergeDescendants = true) {},
onClick = onClick,
colors = IconButtonDefaults.filledIconButtonColors(
containerColor = MaterialTheme.colorScheme.secondaryContainer,
contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
disabledContainerColor = MaterialTheme.colorScheme.onSurface.copy(alpha = .12f),
disabledContentColor = MaterialTheme.colorScheme.onSecondaryContainer,
),
colors = bitwardenFilledIconButtonColors(),
enabled = isEnabled,
) {
Icon(

View file

@ -3,21 +3,17 @@ package com.x8bit.bitwarden.ui.platform.components.button
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenFilledTonalButtonColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* A filled tonal button for the Bitwarden UI with a customized appearance.
*
* This button uses the `secondaryContainer` color from the current [MaterialTheme.colorScheme]
* for its background and the `onSecondaryContainer` color for its label text.
*
* @param label The text to be displayed on the button.
* @param onClick A lambda which will be invoked when the button is clicked.
* @param isEnabled Whether or not the button is enabled.
@ -38,7 +34,7 @@ fun BitwardenFilledTonalButton(
horizontal = 24.dp,
),
enabled = isEnabled,
colors = ButtonDefaults.filledTonalButtonColors(),
colors = bitwardenFilledTonalButtonColors(),
modifier = modifier,
) {
Text(

View file

@ -3,9 +3,7 @@ package com.x8bit.bitwarden.ui.platform.components.button
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@ -13,15 +11,13 @@ import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenFilledTonalButtonColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* A filled tonal button for the Bitwarden UI with a customized appearance and an icon.
*
* This button uses the `secondaryContainer` color from the current [MaterialTheme.colorScheme]
* for its background and the `onSecondaryContainer` color for its label text.
*
* @param label The text to be displayed on the button.
* @param icon The icon for the button.
* @param onClick A lambda which will be invoked when the button is clicked.
@ -43,7 +39,7 @@ fun BitwardenFilledTonalButtonWithIcon(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = ButtonDefaults.filledTonalButtonColors(),
colors = bitwardenFilledTonalButtonColors(),
modifier = modifier,
enabled = isEnabled,
) {

View file

@ -1,7 +1,7 @@
package com.x8bit.bitwarden.ui.platform.components.button
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@ -9,6 +9,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenOutlinedButtonColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
@ -35,7 +36,15 @@ fun BitwardenOutlinedButton(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = ButtonDefaults.outlinedButtonColors(),
colors = bitwardenOutlinedButtonColors(),
border = BorderStroke(
width = 1.dp,
color = if (isEnabled) {
BitwardenTheme.colorScheme.outlineButton.border
} else {
BitwardenTheme.colorScheme.outlineButton.borderDisabled
},
),
) {
Text(
text = label,

View file

@ -1,8 +1,8 @@
package com.x8bit.bitwarden.ui.platform.components.button
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
@ -13,6 +13,7 @@ import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenOutlinedButtonColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -42,7 +43,15 @@ fun BitwardenOutlinedButtonWithIcon(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = ButtonDefaults.outlinedButtonColors(),
colors = bitwardenOutlinedButtonColors(),
border = BorderStroke(
width = 1.dp,
color = if (isEnabled) {
BitwardenTheme.colorScheme.outlineButton.border
} else {
BitwardenTheme.colorScheme.outlineButton.borderDisabled
},
),
) {
Icon(
painter = icon,

View file

@ -2,8 +2,6 @@ package com.x8bit.bitwarden.ui.platform.components.button
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@ -11,6 +9,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenOutlinedErrorButtonColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
@ -36,12 +35,10 @@ fun BitwardenOutlinedErrorButton(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = ButtonDefaults.outlinedButtonColors(
contentColor = MaterialTheme.colorScheme.error,
),
colors = bitwardenOutlinedErrorButtonColors(),
border = BorderStroke(
width = 1.dp,
color = MaterialTheme.colorScheme.error.copy(
color = BitwardenTheme.colorScheme.status.error.copy(
alpha = if (isEnabled) 1f else 0.12f,
),
),

View file

@ -3,8 +3,6 @@ package com.x8bit.bitwarden.ui.platform.components.button
import androidx.annotation.DrawableRes
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.LocalContentColor
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
@ -12,6 +10,7 @@ import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenStandardIconButtonColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -31,7 +30,7 @@ fun BitwardenStandardIconButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
isEnabled: Boolean = true,
contentColor: Color = LocalContentColor.current,
contentColor: Color = BitwardenTheme.colorScheme.icon.primary,
) {
BitwardenStandardIconButton(
painter = rememberVectorPainter(id = vectorIconRes),
@ -59,14 +58,12 @@ fun BitwardenStandardIconButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
isEnabled: Boolean = true,
contentColor: Color = LocalContentColor.current,
contentColor: Color = BitwardenTheme.colorScheme.icon.primary,
) {
IconButton(
modifier = modifier.semantics(mergeDescendants = true) {},
onClick = onClick,
colors = IconButtonDefaults.iconButtonColors(
contentColor = contentColor,
),
colors = bitwardenStandardIconButtonColors(contentColor = contentColor),
enabled = isEnabled,
) {
Icon(

View file

@ -1,7 +1,6 @@
package com.x8bit.bitwarden.ui.platform.components.button
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
@ -9,6 +8,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenTextButtonColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
@ -25,16 +25,8 @@ fun BitwardenTextButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
isEnabled: Boolean = true,
labelTextColor: Color? = null,
labelTextColor: Color = BitwardenTheme.colorScheme.outlineButton.foreground,
) {
val defaultColors = if (labelTextColor != null) {
ButtonDefaults.textButtonColors(
contentColor = labelTextColor,
)
} else {
ButtonDefaults.textButtonColors()
}
TextButton(
onClick = onClick,
modifier = modifier,
@ -43,7 +35,7 @@ fun BitwardenTextButton(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = defaultColors,
colors = bitwardenTextButtonColors(contentColor = labelTextColor),
) {
Text(
text = label,

View file

@ -0,0 +1,74 @@
package com.x8bit.bitwarden.ui.platform.components.button.color
import androidx.compose.material3.ButtonColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Provides a default set of Bitwarden-styled colors for a filled button.
*/
@Composable
fun bitwardenFilledButtonColors(): ButtonColors = ButtonColors(
containerColor = BitwardenTheme.colorScheme.filledButton.background,
contentColor = BitwardenTheme.colorScheme.filledButton.foreground,
disabledContainerColor = BitwardenTheme.colorScheme.filledButton.backgroundDisabled,
disabledContentColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
)
/**
* Provides a default set of Bitwarden-styled colors for a filled error button.
*/
@Composable
fun bitwardenFilledErrorButtonColors() = ButtonColors(
containerColor = BitwardenTheme.colorScheme.status.weak1,
contentColor = BitwardenTheme.colorScheme.filledButton.foreground,
disabledContainerColor = BitwardenTheme.colorScheme.filledButton.backgroundDisabled,
disabledContentColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
)
/**
* Provides a default set of Bitwarden-styled colors for a tonal button.
*/
@Composable
fun bitwardenFilledTonalButtonColors(): ButtonColors = ButtonColors(
containerColor = BitwardenTheme.colorScheme.tonalButton.background,
contentColor = BitwardenTheme.colorScheme.tonalButton.foreground,
disabledContainerColor = BitwardenTheme.colorScheme.tonalButton.backgroundDisabled,
disabledContentColor = BitwardenTheme.colorScheme.tonalButton.foregroundDisabled,
)
/**
* Provides a default set of Bitwarden-styled colors for an outlined button.
*/
@Composable
fun bitwardenOutlinedButtonColors(): ButtonColors = ButtonColors(
containerColor = Color.Transparent,
contentColor = BitwardenTheme.colorScheme.outlineButton.foreground,
disabledContainerColor = Color.Transparent,
disabledContentColor = BitwardenTheme.colorScheme.outlineButton.foregroundDisabled,
)
/**
* Provides a default set of Bitwarden-styled colors for an outlined error button.
*/
@Composable
fun bitwardenOutlinedErrorButtonColors(): ButtonColors = ButtonColors(
containerColor = Color.Transparent,
contentColor = BitwardenTheme.colorScheme.status.error,
disabledContainerColor = Color.Transparent,
disabledContentColor = BitwardenTheme.colorScheme.outlineButton.foregroundDisabled,
)
/**
* Provides a default set of Bitwarden-styled colors for a text button.
*/
@Composable
fun bitwardenTextButtonColors(
contentColor: Color = BitwardenTheme.colorScheme.outlineButton.foreground,
): ButtonColors = ButtonColors(
containerColor = Color.Transparent,
contentColor = contentColor,
disabledContainerColor = Color.Transparent,
disabledContentColor = BitwardenTheme.colorScheme.outlineButton.foregroundDisabled,
)

View file

@ -0,0 +1,30 @@
package com.x8bit.bitwarden.ui.platform.components.button.color
import androidx.compose.material3.IconButtonColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Provides a default set of Bitwarden-styled colors for a filled icon button.
*/
@Composable
fun bitwardenFilledIconButtonColors(): IconButtonColors = IconButtonColors(
containerColor = BitwardenTheme.colorScheme.background.tertiary,
contentColor = BitwardenTheme.colorScheme.filledButton.foregroundReversed,
disabledContainerColor = BitwardenTheme.colorScheme.filledButton.backgroundDisabled,
disabledContentColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
)
/**
* Provides a default set of Bitwarden-styled colors for a standard icon button.
*/
@Composable
fun bitwardenStandardIconButtonColors(
contentColor: Color = BitwardenTheme.colorScheme.icon.primary,
): IconButtonColors = IconButtonColors(
containerColor = Color.Transparent,
contentColor = contentColor,
disabledContainerColor = Color.Transparent,
disabledContentColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
)

View file

@ -24,6 +24,7 @@ import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.badge.NotificationBadge
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenFilledButton
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenStandardIconButton
import com.x8bit.bitwarden.ui.platform.components.card.color.bitwardenCardColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -50,9 +51,7 @@ fun BitwardenActionCard(
Card(
modifier = modifier,
shape = RoundedCornerShape(12.dp),
colors = CardDefaults.cardColors(
containerColor = BitwardenTheme.colorScheme.background.tertiary,
),
colors = bitwardenCardColors(),
elevation = CardDefaults.elevatedCardElevation(),
border = BorderStroke(width = 1.dp, color = BitwardenTheme.colorScheme.stroke.border),
) {
@ -77,13 +76,12 @@ fun BitwardenActionCard(
painter = rememberVectorPainter(id = R.drawable.ic_close),
contentDescription = stringResource(id = R.string.close),
onClick = onDismissClick,
contentColor = BitwardenTheme.colorScheme.icon.primary,
modifier = Modifier.offset(x = 8.dp),
)
}
Spacer(Modifier.height(16.dp))
BitwardenFilledButton(
actionText,
label = actionText,
onClick = onActionClick,
modifier = Modifier.fillMaxWidth(),
)

View file

@ -1,5 +1,6 @@
package com.x8bit.bitwarden.ui.platform.components.card
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
@ -14,7 +15,6 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -23,6 +23,7 @@ import androidx.compose.ui.graphics.vector.VectorPainter
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.card.color.bitwardenCardColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -40,12 +41,11 @@ fun BitwardenActionCardSmall(
) {
Card(
onClick = onCardClicked,
shape = RoundedCornerShape(size = 16.dp),
shape = RoundedCornerShape(size = 12.dp),
modifier = modifier,
colors = CardDefaults.cardColors(
containerColor = BitwardenTheme.colorScheme.background.tertiary,
),
colors = bitwardenCardColors(),
elevation = CardDefaults.elevatedCardElevation(),
border = BorderStroke(width = 1.dp, color = BitwardenTheme.colorScheme.stroke.border),
) {
Row(
modifier = Modifier
@ -111,7 +111,7 @@ private fun ActionCardSmallWithTrailingIcon_preview() {
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_navigate_next),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurfaceVariant,
tint = BitwardenTheme.colorScheme.icon.primary,
)
},
)

View file

@ -0,0 +1,16 @@
package com.x8bit.bitwarden.ui.platform.components.card.color
import androidx.compose.material3.CardColors
import androidx.compose.runtime.Composable
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Provides a default set of Bitwarden-styled colors for a card.
*/
@Composable
fun bitwardenCardColors(): CardColors = CardColors(
containerColor = BitwardenTheme.colorScheme.background.tertiary,
contentColor = BitwardenTheme.colorScheme.text.primary,
disabledContainerColor = BitwardenTheme.colorScheme.filledButton.backgroundDisabled,
disabledContentColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
)

View file

@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -38,7 +37,7 @@ fun BitwardenErrorContent(
Spacer(modifier = Modifier.weight(1f))
Text(
text = message,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
style = BitwardenTheme.typography.bodyMedium,
textAlign = TextAlign.Center,
modifier = Modifier

View file

@ -2,7 +2,6 @@ package com.x8bit.bitwarden.ui.platform.components.dialog
import android.os.Parcelable
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.ExperimentalComposeUiApi
@ -60,7 +59,10 @@ fun BitwardenBasicDialog(
modifier = Modifier.testTag("AlertContentText"),
)
},
containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
containerColor = BitwardenTheme.colorScheme.background.primary,
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
titleContentColor = BitwardenTheme.colorScheme.text.primary,
textContentColor = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.semantics {
testTagsAsResourceId = true
testTag = "AlertPopup"

View file

@ -3,14 +3,12 @@ package com.x8bit.bitwarden.ui.platform.components.dialog
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerColors
import androidx.compose.material3.DatePickerDialog
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.rememberDatePickerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@ -30,6 +28,9 @@ import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTag
import androidx.compose.ui.semantics.testTagsAsResourceId
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
import com.x8bit.bitwarden.ui.platform.components.field.color.bitwardenTextFieldButtonColors
import com.x8bit.bitwarden.ui.platform.components.field.color.bitwardenTextFieldColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import com.x8bit.bitwarden.ui.platform.util.orNow
@ -93,18 +94,10 @@ fun BitwardenDateSelectButton(
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_region_select_dropdown),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurfaceVariant,
tint = BitwardenTheme.colorScheme.icon.primary,
)
},
colors = OutlinedTextFieldDefaults.colors(
disabledTextColor = MaterialTheme.colorScheme.onSurface,
disabledBorderColor = MaterialTheme.colorScheme.outline,
disabledLeadingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledTrailingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledLabelColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledPlaceholderColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledSupportingTextColor = MaterialTheme.colorScheme.onSurfaceVariant,
),
colors = bitwardenTextFieldButtonColors(),
)
if (shouldShowDialog) {
@ -112,9 +105,11 @@ fun BitwardenDateSelectButton(
initialSelectedDateMillis = currentZonedDateTime.orNow().toInstant().toEpochMilli(),
)
DatePickerDialog(
colors = bitwardenDatePickerColors(),
onDismissRequest = { shouldShowDialog = false },
confirmButton = {
TextButton(
BitwardenTextButton(
label = stringResource(id = R.string.ok),
onClick = {
onDateSelect(
ZonedDateTime
@ -128,31 +123,55 @@ fun BitwardenDateSelectButton(
)
shouldShowDialog = false
},
modifier = Modifier.testTag("AcceptAlertButton"),
) {
Text(
text = stringResource(id = R.string.ok),
style = BitwardenTheme.typography.labelLarge,
)
}
modifier = Modifier.testTag(tag = "AcceptAlertButton"),
)
},
dismissButton = {
TextButton(
BitwardenTextButton(
label = stringResource(id = R.string.cancel),
onClick = { shouldShowDialog = false },
modifier = Modifier.testTag("DismissAlertButton"),
) {
Text(
text = stringResource(id = R.string.cancel),
style = BitwardenTheme.typography.labelLarge,
)
}
modifier = Modifier.testTag(tag = "DismissAlertButton"),
)
},
modifier = Modifier.semantics {
testTagsAsResourceId = true
testTag = "AlertPopup"
},
) {
DatePicker(state = datePickerState)
DatePicker(
state = datePickerState,
colors = bitwardenDatePickerColors(),
)
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun bitwardenDatePickerColors(): DatePickerColors = DatePickerColors(
containerColor = BitwardenTheme.colorScheme.background.primary,
titleContentColor = BitwardenTheme.colorScheme.text.secondary,
headlineContentColor = BitwardenTheme.colorScheme.text.primary,
weekdayContentColor = BitwardenTheme.colorScheme.text.primary,
subheadContentColor = BitwardenTheme.colorScheme.text.secondary,
navigationContentColor = BitwardenTheme.colorScheme.icon.primary,
yearContentColor = BitwardenTheme.colorScheme.text.primary,
disabledYearContentColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
currentYearContentColor = BitwardenTheme.colorScheme.filledButton.foreground,
selectedYearContentColor = BitwardenTheme.colorScheme.filledButton.foreground,
disabledSelectedYearContentColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
selectedYearContainerColor = BitwardenTheme.colorScheme.filledButton.background,
disabledSelectedYearContainerColor = BitwardenTheme.colorScheme.filledButton.backgroundDisabled,
dayContentColor = BitwardenTheme.colorScheme.text.primary,
disabledDayContentColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
selectedDayContentColor = BitwardenTheme.colorScheme.text.reversed,
disabledSelectedDayContentColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
selectedDayContainerColor = BitwardenTheme.colorScheme.filledButton.background,
disabledSelectedDayContainerColor = BitwardenTheme.colorScheme.filledButton.backgroundDisabled,
todayContentColor = BitwardenTheme.colorScheme.outlineButton.foreground,
todayDateBorderColor = BitwardenTheme.colorScheme.outlineButton.border,
dayInSelectionRangeContainerColor = BitwardenTheme.colorScheme.filledButton.background,
dividerColor = BitwardenTheme.colorScheme.stroke.divider,
dayInSelectionRangeContentColor = BitwardenTheme.colorScheme.text.primary,
dateTextFieldColors = bitwardenTextFieldColors(),
)

View file

@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -52,7 +51,8 @@ fun BitwardenLoadingDialog(
Card(
shape = RoundedCornerShape(28.dp),
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
containerColor = BitwardenTheme.colorScheme.background.primary,
contentColor = BitwardenTheme.colorScheme.text.primary,
),
modifier = Modifier
.semantics {

View file

@ -5,7 +5,6 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@ -84,7 +83,10 @@ fun BitwardenMasterPasswordDialog(
)
}
},
containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
containerColor = BitwardenTheme.colorScheme.background.primary,
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
titleContentColor = BitwardenTheme.colorScheme.text.primary,
textContentColor = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.semantics {
testTagsAsResourceId = true
testTag = "AlertPopup"

View file

@ -2,7 +2,6 @@ package com.x8bit.bitwarden.ui.platform.components.dialog
import androidx.compose.foundation.layout.imePadding
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@ -70,7 +69,10 @@ fun BitwardenPinDialog(
autoFocus = true,
)
},
containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
containerColor = BitwardenTheme.colorScheme.background.primary,
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
titleContentColor = BitwardenTheme.colorScheme.text.primary,
textContentColor = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.semantics {
testTagsAsResourceId = true
testTag = "AlertPopup"

View file

@ -1,17 +1,14 @@
package com.x8bit.bitwarden.ui.platform.components.dialog
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeightIn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -28,6 +25,7 @@ import androidx.compose.ui.window.Dialog
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
import com.x8bit.bitwarden.ui.platform.components.dialog.row.BitwardenSelectionRow
import com.x8bit.bitwarden.ui.platform.components.divider.BitwardenHorizontalDivider
import com.x8bit.bitwarden.ui.platform.components.util.maxDialogHeight
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -63,7 +61,7 @@ fun BitwardenSelectionDialog(
)
// This background is necessary for the dialog to not be transparent.
.background(
color = MaterialTheme.colorScheme.surfaceContainerHigh,
color = BitwardenTheme.colorScheme.background.primary,
shape = RoundedCornerShape(28.dp),
),
horizontalAlignment = Alignment.End,
@ -74,16 +72,11 @@ fun BitwardenSelectionDialog(
.padding(24.dp)
.fillMaxWidth(),
text = title,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
style = BitwardenTheme.typography.headlineSmall,
)
if (scrollState.canScrollBackward) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(MaterialTheme.colorScheme.outlineVariant),
)
BitwardenHorizontalDivider()
}
Column(
modifier = Modifier
@ -92,12 +85,7 @@ fun BitwardenSelectionDialog(
content = selectionItems,
)
if (scrollState.canScrollForward) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(MaterialTheme.colorScheme.outlineVariant),
)
BitwardenHorizontalDivider()
}
BitwardenTextButton(
modifier = Modifier

View file

@ -1,7 +1,6 @@
package com.x8bit.bitwarden.ui.platform.components.dialog
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
@ -86,7 +85,10 @@ fun BitwardenTextEntryDialog(
},
)
},
containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
containerColor = BitwardenTheme.colorScheme.background.primary,
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
titleContentColor = BitwardenTheme.colorScheme.text.primary,
textContentColor = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.semantics {
testTagsAsResourceId = true
testTag = "AlertPopup"

View file

@ -1,6 +1,5 @@
package com.x8bit.bitwarden.ui.platform.components.dialog
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.IntrinsicSize
@ -14,9 +13,9 @@ import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TimeInput
import androidx.compose.material3.TimePicker
import androidx.compose.material3.TimePickerColors
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@ -36,6 +35,7 @@ import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenStandardIconButton
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
@ -67,26 +67,18 @@ fun BitwardenTimePickerDialog(
TimePickerDialog(
onDismissRequest = onDismissRequest,
confirmButton = {
TextButton(
BitwardenTextButton(
modifier = Modifier.testTag(tag = "AcceptAlertButton"),
label = stringResource(id = R.string.ok),
onClick = { onTimeSelect(timePickerState.hour, timePickerState.minute) },
) {
Text(
text = stringResource(id = R.string.ok),
style = BitwardenTheme.typography.labelLarge,
modifier = Modifier.testTag("AcceptAlertButton"),
)
}
)
},
dismissButton = {
TextButton(
BitwardenTextButton(
modifier = Modifier.testTag(tag = "DismissAlertButton"),
label = stringResource(id = R.string.cancel),
onClick = onDismissRequest,
modifier = Modifier.testTag("DismissAlertButton"),
) {
Text(
text = stringResource(id = R.string.cancel),
style = BitwardenTheme.typography.labelLarge,
)
}
)
},
inputToggleButton = {
BitwardenStandardIconButton(
@ -96,7 +88,6 @@ fun BitwardenTimePickerDialog(
id = androidx.compose.material3.R.string.m3c_date_picker_switch_to_input_mode,
),
onClick = { showTimeInput = !showTimeInput },
contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
)
},
) {
@ -104,17 +95,41 @@ fun BitwardenTimePickerDialog(
if (showTimeInput) {
TimeInput(
state = timePickerState,
colors = bitwardenTimePickerColors(),
modifier = modifier,
)
} else {
TimePicker(
state = timePickerState,
colors = bitwardenTimePickerColors(),
modifier = modifier,
)
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun bitwardenTimePickerColors(): TimePickerColors = TimePickerColors(
clockDialColor = BitwardenTheme.colorScheme.filledButton.backgroundReversed,
selectorColor = BitwardenTheme.colorScheme.filledButton.background,
containerColor = BitwardenTheme.colorScheme.filledButton.foreground,
clockDialSelectedContentColor = BitwardenTheme.colorScheme.background.secondary,
clockDialUnselectedContentColor = BitwardenTheme.colorScheme.text.primary,
periodSelectorBorderColor = BitwardenTheme.colorScheme.stroke.divider,
periodSelectorSelectedContainerColor = BitwardenTheme
.colorScheme
.filledButton
.backgroundReversed,
periodSelectorUnselectedContainerColor = BitwardenTheme.colorScheme.background.primary,
periodSelectorSelectedContentColor = BitwardenTheme.colorScheme.filledButton.foregroundReversed,
periodSelectorUnselectedContentColor = BitwardenTheme.colorScheme.text.secondary,
timeSelectorSelectedContainerColor = BitwardenTheme.colorScheme.background.tertiary,
timeSelectorUnselectedContainerColor = BitwardenTheme.colorScheme.background.secondary,
timeSelectorSelectedContentColor = BitwardenTheme.colorScheme.text.primary,
timeSelectorUnselectedContentColor = BitwardenTheme.colorScheme.text.primary,
)
@OptIn(ExperimentalComposeUiApi::class)
@Composable
private fun TimePickerDialog(
@ -130,18 +145,15 @@ private fun TimePickerDialog(
) {
Surface(
shape = MaterialTheme.shapes.extraLarge,
tonalElevation = 6.dp,
color = BitwardenTheme.colorScheme.background.primary,
contentColor = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.semantics {
testTagsAsResourceId = true
testTag = "AlertPopup"
}
.width(IntrinsicSize.Min)
.height(IntrinsicSize.Min)
.background(
shape = MaterialTheme.shapes.extraLarge,
color = MaterialTheme.colorScheme.surface,
),
.height(IntrinsicSize.Min),
) {
Column(
modifier = Modifier.padding(24.dp),
@ -154,6 +166,7 @@ private fun TimePickerDialog(
.padding(bottom = 20.dp),
// TODO: This should be "Select time" but we don't have that string (BIT-1405)
text = stringResource(id = R.string.time),
color = BitwardenTheme.colorScheme.text.secondary,
style = BitwardenTheme.typography.labelMedium,
)

View file

@ -3,9 +3,7 @@ package com.x8bit.bitwarden.ui.platform.components.dialog
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@ -19,6 +17,7 @@ import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.role
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.field.color.bitwardenTextFieldButtonColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import com.x8bit.bitwarden.ui.platform.util.orNow
@ -80,18 +79,10 @@ fun BitwardenTimeSelectButton(
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_region_select_dropdown),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurfaceVariant,
tint = BitwardenTheme.colorScheme.icon.primary,
)
},
colors = OutlinedTextFieldDefaults.colors(
disabledTextColor = MaterialTheme.colorScheme.onSurface,
disabledBorderColor = MaterialTheme.colorScheme.outline,
disabledLeadingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledTrailingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledLabelColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledPlaceholderColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledSupportingTextColor = MaterialTheme.colorScheme.onSurfaceVariant,
),
colors = bitwardenTextFieldButtonColors(),
)
if (shouldShowDialog) {

View file

@ -2,7 +2,6 @@ package com.x8bit.bitwarden.ui.platform.components.dialog
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.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
@ -15,7 +14,6 @@ import androidx.compose.foundation.layout.requiredWidthIn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -31,6 +29,7 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
import com.x8bit.bitwarden.ui.platform.components.divider.BitwardenHorizontalDivider
import com.x8bit.bitwarden.ui.platform.components.util.maxDialogHeight
import com.x8bit.bitwarden.ui.platform.components.util.maxDialogWidth
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -60,8 +59,8 @@ fun BitwardenTwoButtonDialog(
onConfirmClick: () -> Unit,
onDismissClick: () -> Unit,
onDismissRequest: () -> Unit,
confirmTextColor: Color? = null,
dismissTextColor: Color? = null,
confirmTextColor: Color = BitwardenTheme.colorScheme.outlineButton.foreground,
dismissTextColor: Color = BitwardenTheme.colorScheme.outlineButton.foreground,
) {
Dialog(
onDismissRequest = onDismissRequest,
@ -83,7 +82,7 @@ fun BitwardenTwoButtonDialog(
)
// This background is necessary for the dialog to not be transparent.
.background(
color = MaterialTheme.colorScheme.surfaceContainerHigh,
color = BitwardenTheme.colorScheme.background.primary,
shape = RoundedCornerShape(28.dp),
),
horizontalAlignment = Alignment.End,
@ -96,18 +95,13 @@ fun BitwardenTwoButtonDialog(
.padding(horizontal = 24.dp)
.fillMaxWidth(),
text = title,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
style = BitwardenTheme.typography.headlineSmall,
)
Spacer(modifier = Modifier.height(16.dp))
}
if (scrollState.canScrollBackward) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(MaterialTheme.colorScheme.outlineVariant),
)
BitwardenHorizontalDivider()
}
Text(
modifier = Modifier
@ -117,16 +111,11 @@ fun BitwardenTwoButtonDialog(
.padding(horizontal = 24.dp)
.fillMaxWidth(),
text = message,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
style = BitwardenTheme.typography.bodyMedium,
)
if (scrollState.canScrollForward) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(MaterialTheme.colorScheme.outlineVariant),
)
BitwardenHorizontalDivider()
}
Spacer(modifier = Modifier.height(12.dp))
FlowRow(

View file

@ -4,7 +4,6 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
@ -34,7 +33,9 @@ fun BitwardenBasicDialogRow(
modifier = modifier
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary),
indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = onClick,
)
.padding(

View file

@ -1,12 +1,14 @@
package com.x8bit.bitwarden.ui.platform.components.dialog.row
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.selected
@ -33,7 +35,13 @@ fun BitwardenSelectionRow(
Row(
modifier = modifier
.fillMaxWidth()
.clickable(onClick = onClick)
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = onClick,
)
.semantics(mergeDescendants = true) {
selected = isSelected
},
@ -46,7 +54,7 @@ fun BitwardenSelectionRow(
)
Text(
text = text(),
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
style = BitwardenTheme.typography.bodyLarge,
)
}

View file

@ -1,12 +1,12 @@
package com.x8bit.bitwarden.ui.platform.components.divider
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* A divider line.
@ -20,7 +20,7 @@ import androidx.compose.ui.unit.dp
fun BitwardenHorizontalDivider(
modifier: Modifier = Modifier,
thickness: Dp = 1.dp,
color: Color = MaterialTheme.colorScheme.outlineVariant,
color: Color = BitwardenTheme.colorScheme.stroke.divider,
) {
HorizontalDivider(
modifier = modifier,

View file

@ -8,10 +8,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@ -33,6 +32,7 @@ import com.x8bit.bitwarden.ui.platform.base.util.asText
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenStandardIconButton
import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenSelectionDialog
import com.x8bit.bitwarden.ui.platform.components.dialog.row.BitwardenSelectionRow
import com.x8bit.bitwarden.ui.platform.components.field.color.bitwardenTextFieldButtonColors
import com.x8bit.bitwarden.ui.platform.components.model.TooltipData
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -91,7 +91,9 @@ fun BitwardenMultiSelectButton(
}
.fillMaxWidth()
.clickable(
indication = null,
indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
enabled = isEnabled,
interactionSource = remember { MutableInteractionSource() },
) {
@ -113,7 +115,7 @@ fun BitwardenMultiSelectButton(
contentDescription = it.contentDescription,
onClick = it.onClick,
isEnabled = isEnabled,
contentColor = MaterialTheme.colorScheme.primary,
contentColor = BitwardenTheme.colorScheme.icon.secondary,
modifier = Modifier.size(16.dp),
)
}
@ -126,18 +128,10 @@ fun BitwardenMultiSelectButton(
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_region_select_dropdown),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurfaceVariant,
tint = BitwardenTheme.colorScheme.icon.primary,
)
},
colors = OutlinedTextFieldDefaults.colors(
disabledTextColor = MaterialTheme.colorScheme.onSurface,
disabledBorderColor = MaterialTheme.colorScheme.outline,
disabledLeadingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledTrailingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledLabelColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledPlaceholderColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledSupportingTextColor = MaterialTheme.colorScheme.onSurfaceVariant,
),
colors = bitwardenTextFieldButtonColors(),
supportingText = supportingText?.let {
{
Text(

View file

@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
@ -60,7 +59,7 @@ fun EnvironmentSelector(
.clickable(
indication = ripple(
bounded = true,
color = MaterialTheme.colorScheme.primary,
color = BitwardenTheme.colorScheme.background.pressed,
),
interactionSource = remember { MutableInteractionSource() },
onClick = { shouldShowDialog = !shouldShowDialog },
@ -74,19 +73,19 @@ fun EnvironmentSelector(
Text(
text = labelText,
style = BitwardenTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.padding(end = 12.dp),
)
Text(
text = selectedOption.displayLabel(),
style = BitwardenTheme.typography.labelLarge,
color = MaterialTheme.colorScheme.primary,
color = BitwardenTheme.colorScheme.text.interaction,
modifier = Modifier.padding(end = 8.dp),
)
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_region_select_dropdown),
contentDescription = stringResource(id = R.string.region),
tint = MaterialTheme.colorScheme.primary,
tint = BitwardenTheme.colorScheme.icon.secondary,
)
}

View file

@ -2,10 +2,10 @@ package com.x8bit.bitwarden.ui.platform.components.fab
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Represents a Bitwarden-styled [FloatingActionButton].
@ -23,14 +23,14 @@ fun BitwardenFloatingActionButton(
modifier: Modifier = Modifier,
) {
FloatingActionButton(
containerColor = MaterialTheme.colorScheme.primaryContainer,
containerColor = BitwardenTheme.colorScheme.filledButton.background,
contentColor = BitwardenTheme.colorScheme.filledButton.foreground,
onClick = onClick,
modifier = modifier,
) {
Icon(
painter = painter,
contentDescription = contentDescription,
tint = MaterialTheme.colorScheme.onPrimaryContainer,
)
}
}

View file

@ -1,15 +1,14 @@
package com.x8bit.bitwarden.ui.platform.components.field
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.ui.platform.components.field.color.bitwardenTextFieldColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
@ -36,15 +35,7 @@ fun BitwardenHiddenPasswordField(
enabled = false,
readOnly = true,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
colors = OutlinedTextFieldDefaults.colors(
disabledTextColor = MaterialTheme.colorScheme.onSurface,
disabledBorderColor = MaterialTheme.colorScheme.outline,
disabledLeadingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledTrailingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledLabelColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledPlaceholderColor = MaterialTheme.colorScheme.onSurfaceVariant,
disabledSupportingTextColor = MaterialTheme.colorScheme.onSurfaceVariant,
),
colors = bitwardenTextFieldColors(),
)
}

View file

@ -2,7 +2,6 @@ package com.x8bit.bitwarden.ui.platform.components.field
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@ -26,6 +25,7 @@ import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.tabNavigation
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenStandardIconButton
import com.x8bit.bitwarden.ui.platform.components.field.color.bitwardenTextFieldColors
import com.x8bit.bitwarden.ui.platform.components.util.nonLetterColorVisualTransformation
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -74,6 +74,7 @@ fun BitwardenPasswordField(
modifier = modifier
.tabNavigation()
.focusRequester(focusRequester),
colors = bitwardenTextFieldColors(),
textStyle = BitwardenTheme.typography.sensitiveInfoSmall,
label = { Text(text = label) },
value = value,
@ -110,7 +111,6 @@ fun BitwardenPasswordField(
id = if (showPassword) R.string.hide else R.string.show,
),
onClick = { showPasswordChange.invoke(!showPassword) },
contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
)
},
)

View file

@ -2,7 +2,6 @@ package com.x8bit.bitwarden.ui.platform.components.field
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@ -22,6 +21,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.base.util.toPx
import com.x8bit.bitwarden.ui.platform.base.util.withLineBreaksAtWidth
import com.x8bit.bitwarden.ui.platform.components.field.color.bitwardenTextFieldColors
import com.x8bit.bitwarden.ui.platform.components.model.IconResource
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -80,6 +80,7 @@ fun BitwardenTextField(
}
OutlinedTextField(
colors = bitwardenTextFieldColors(),
modifier = modifier
.onGloballyPositioned { widthPx = it.size.width }
.focusRequester(focusRequester),
@ -91,15 +92,18 @@ fun BitwardenTextField(
Icon(
painter = iconResource.iconPainter,
contentDescription = iconResource.contentDescription,
tint = MaterialTheme.colorScheme.onSurfaceVariant,
tint = BitwardenTheme.colorScheme.icon.primary,
)
}
},
trailingIcon = trailingIconContent?.let {
trailingIconContent
},
trailingIcon = trailingIconContent,
placeholder = placeholder?.let {
{ Text(text = it) }
{
Text(
text = it,
color = BitwardenTheme.colorScheme.text.primary,
)
}
},
supportingText = hint?.let {
{

View file

@ -0,0 +1,89 @@
package com.x8bit.bitwarden.ui.platform.components.field.color
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.material3.TextFieldColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Provides a default set of Bitwarden-styled colors for a read-only text field button.
*/
@Composable
fun bitwardenTextFieldButtonColors(): TextFieldColors = bitwardenTextFieldColors(
unfocusedBorderColor = BitwardenTheme.colorScheme.stroke.divider,
focusedBorderColor = BitwardenTheme.colorScheme.stroke.divider,
disabledTextColor = BitwardenTheme.colorScheme.text.primary,
disabledBorderColor = BitwardenTheme.colorScheme.stroke.divider,
disabledLeadingIconColor = BitwardenTheme.colorScheme.icon.primary,
disabledTrailingIconColor = BitwardenTheme.colorScheme.icon.primary,
disabledLabelColor = BitwardenTheme.colorScheme.text.secondary,
disabledPlaceholderColor = BitwardenTheme.colorScheme.text.secondary,
disabledSupportingTextColor = BitwardenTheme.colorScheme.text.secondary,
)
/**
* Provides a default set of Bitwarden-styled colors for text fields.
*/
@Composable
fun bitwardenTextFieldColors(
unfocusedBorderColor: Color = BitwardenTheme.colorScheme.stroke.divider,
focusedBorderColor: Color = BitwardenTheme.colorScheme.stroke.border,
disabledTextColor: Color = BitwardenTheme.colorScheme.outlineButton.foregroundDisabled,
disabledBorderColor: Color = BitwardenTheme.colorScheme.outlineButton.borderDisabled,
disabledLeadingIconColor: Color = BitwardenTheme.colorScheme.outlineButton.foregroundDisabled,
disabledTrailingIconColor: Color = BitwardenTheme.colorScheme.outlineButton.foregroundDisabled,
disabledLabelColor: Color = BitwardenTheme.colorScheme.outlineButton.foregroundDisabled,
disabledPlaceholderColor: Color = BitwardenTheme.colorScheme.text.secondary,
disabledSupportingTextColor: Color = BitwardenTheme
.colorScheme
.outlineButton
.foregroundDisabled,
): TextFieldColors = TextFieldColors(
focusedTextColor = BitwardenTheme.colorScheme.text.primary,
unfocusedTextColor = BitwardenTheme.colorScheme.text.primary,
disabledTextColor = disabledTextColor,
errorTextColor = BitwardenTheme.colorScheme.text.primary,
focusedContainerColor = Color.Transparent,
unfocusedContainerColor = Color.Transparent,
disabledContainerColor = Color.Transparent,
errorContainerColor = Color.Transparent,
cursorColor = BitwardenTheme.colorScheme.icon.primary,
errorCursorColor = BitwardenTheme.colorScheme.icon.primary,
textSelectionColors = TextSelectionColors(
handleColor = BitwardenTheme.colorScheme.stroke.border,
backgroundColor = BitwardenTheme.colorScheme.stroke.border.copy(alpha = 0.4f),
),
focusedIndicatorColor = focusedBorderColor,
unfocusedIndicatorColor = unfocusedBorderColor,
disabledIndicatorColor = disabledBorderColor,
errorIndicatorColor = BitwardenTheme.colorScheme.status.error,
focusedLeadingIconColor = BitwardenTheme.colorScheme.icon.primary,
unfocusedLeadingIconColor = BitwardenTheme.colorScheme.icon.primary,
disabledLeadingIconColor = disabledLeadingIconColor,
errorLeadingIconColor = BitwardenTheme.colorScheme.icon.primary,
focusedTrailingIconColor = BitwardenTheme.colorScheme.icon.primary,
unfocusedTrailingIconColor = BitwardenTheme.colorScheme.icon.primary,
disabledTrailingIconColor = disabledTrailingIconColor,
errorTrailingIconColor = BitwardenTheme.colorScheme.status.error,
focusedLabelColor = BitwardenTheme.colorScheme.text.secondary,
unfocusedLabelColor = BitwardenTheme.colorScheme.text.secondary,
disabledLabelColor = disabledLabelColor,
errorLabelColor = BitwardenTheme.colorScheme.status.error,
focusedPlaceholderColor = BitwardenTheme.colorScheme.text.secondary,
unfocusedPlaceholderColor = BitwardenTheme.colorScheme.text.secondary,
disabledPlaceholderColor = disabledPlaceholderColor,
errorPlaceholderColor = BitwardenTheme.colorScheme.text.secondary,
focusedSupportingTextColor = BitwardenTheme.colorScheme.text.secondary,
unfocusedSupportingTextColor = BitwardenTheme.colorScheme.text.secondary,
disabledSupportingTextColor = disabledSupportingTextColor,
errorSupportingTextColor = BitwardenTheme.colorScheme.text.secondary,
focusedPrefixColor = BitwardenTheme.colorScheme.text.secondary,
unfocusedPrefixColor = BitwardenTheme.colorScheme.text.secondary,
disabledPrefixColor = BitwardenTheme.colorScheme.outlineButton.foregroundDisabled,
errorPrefixColor = BitwardenTheme.colorScheme.status.error,
focusedSuffixColor = BitwardenTheme.colorScheme.text.secondary,
unfocusedSuffixColor = BitwardenTheme.colorScheme.text.secondary,
disabledSuffixColor = BitwardenTheme.colorScheme.outlineButton.foregroundDisabled,
errorSuffixColor = BitwardenTheme.colorScheme.status.error,
)

View file

@ -1,7 +1,6 @@
package com.x8bit.bitwarden.ui.platform.components.header
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@ -23,7 +22,7 @@ fun BitwardenListHeaderText(
Text(
text = label,
style = BitwardenTheme.typography.labelMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.secondary,
modifier = modifier.padding(
top = 12.dp,
bottom = 4.dp,

View file

@ -3,7 +3,6 @@ package com.x8bit.bitwarden.ui.platform.components.header
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@ -38,13 +37,13 @@ fun BitwardenListHeaderTextWithSupportLabel(
Text(
text = label,
style = BitwardenTheme.typography.labelMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.secondary,
)
Text(
text = supportingLabel,
style = BitwardenTheme.typography.labelSmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.secondary,
)
}
}

View file

@ -6,12 +6,12 @@ import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -46,7 +46,8 @@ fun BitwardenCircularCountdownIndicator(
CircularProgressIndicator(
progress = { progressAnimate },
modifier = Modifier.size(size = 30.dp),
color = MaterialTheme.colorScheme.primary,
color = BitwardenTheme.colorScheme.icon.secondary,
trackColor = Color.Transparent,
strokeWidth = 3.dp,
strokeCap = StrokeCap.Round,
)
@ -54,7 +55,7 @@ fun BitwardenCircularCountdownIndicator(
Text(
text = timeLeftSeconds.toString(),
style = BitwardenTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
)
}
}

View file

@ -3,6 +3,7 @@ package com.x8bit.bitwarden.ui.platform.components.indicator
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* A Bitwarden-styled [CircularProgressIndicator].
@ -11,5 +12,8 @@ import androidx.compose.ui.Modifier
fun BitwardenCircularProgressIndicator(
modifier: Modifier = Modifier,
) {
CircularProgressIndicator(modifier = modifier)
CircularProgressIndicator(
modifier = modifier,
color = BitwardenTheme.colorScheme.stroke.border,
)
}

View file

@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
@ -51,7 +50,9 @@ fun BitwardenGroupItem(
modifier = Modifier
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary),
indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = onClick,
)
.bottomDivider(
@ -70,7 +71,7 @@ fun BitwardenGroupItem(
Icon(
painter = startIcon,
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface,
tint = BitwardenTheme.colorScheme.icon.primary,
modifier = Modifier
.semantics { startIconTestTag?.let { testTag = it } }
.size(24.dp),
@ -79,20 +80,20 @@ fun BitwardenGroupItem(
Text(
text = label,
style = BitwardenTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.weight(1f),
)
Text(
text = supportingLabel,
style = BitwardenTheme.typography.labelSmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
)
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_navigate_next),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurfaceVariant,
tint = BitwardenTheme.colorScheme.icon.primary,
modifier = Modifier
.mirrorIfRtl()
.size(24.dp),

View file

@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
@ -82,7 +81,9 @@ fun BitwardenListItem(
modifier = Modifier
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary),
indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = onClick,
)
.defaultMinSize(minHeight = 72.dp)
@ -94,7 +95,7 @@ fun BitwardenListItem(
BitwardenIcon(
iconData = startIcon,
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface,
tint = BitwardenTheme.colorScheme.icon.primary,
modifier = Modifier
.semantics { startIconTestTag?.let { testTag = it } }
.size(24.dp),
@ -107,7 +108,7 @@ fun BitwardenListItem(
Text(
text = label,
style = BitwardenTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier = Modifier
@ -120,7 +121,7 @@ fun BitwardenListItem(
Icon(
painter = iconResource.iconPainter,
contentDescription = iconResource.contentDescription,
tint = MaterialTheme.colorScheme.secondary,
tint = BitwardenTheme.colorScheme.icon.primary,
modifier = Modifier
.semantics { iconResource.testTag?.let { testTag = it } }
.size(16.dp),
@ -132,7 +133,7 @@ fun BitwardenListItem(
Text(
text = secondSupportLabel,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.secondary,
modifier = Modifier.semantics {
secondSupportingLabelTestTag?.let { testTag = it }
},
@ -143,7 +144,7 @@ fun BitwardenListItem(
Text(
text = supportLabel,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.secondary,
modifier = Modifier.semantics { supportingLabelTestTag?.let { testTag = it } },
)
}
@ -154,7 +155,6 @@ fun BitwardenListItem(
vectorIconRes = R.drawable.ic_more_horizontal,
contentDescription = stringResource(id = R.string.options),
onClick = { shouldShowDialog = true },
contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
modifier = Modifier.semantics { optionsTestTag?.let { testTag = it } },
)
}

View file

@ -5,15 +5,14 @@ import androidx.annotation.StringRes
import androidx.compose.foundation.layout.RowScope
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationBarItemDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import com.x8bit.bitwarden.ui.platform.components.badge.NotificationBadge
import com.x8bit.bitwarden.ui.platform.components.navigation.color.bitwardenNavigationBarItemColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
/**
@ -66,13 +65,7 @@ fun RowScope.BitwardenNavigationBarItem(
},
selected = isSelected,
onClick = onClick,
colors = NavigationBarItemDefaults.colors(
indicatorColor = MaterialTheme.colorScheme.secondaryContainer,
selectedIconColor = MaterialTheme.colorScheme.onSecondaryContainer,
unselectedIconColor = MaterialTheme.colorScheme.onSurface,
selectedTextColor = MaterialTheme.colorScheme.onSecondaryContainer,
unselectedTextColor = MaterialTheme.colorScheme.onSurface,
),
colors = bitwardenNavigationBarItemColors(),
modifier = modifier,
)
}

View file

@ -0,0 +1,20 @@
package com.x8bit.bitwarden.ui.platform.components.navigation.color
import androidx.compose.material3.NavigationBarItemColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Provides a default set of Bitwarden-styled colors for navigation bar items.
*/
@Composable
fun bitwardenNavigationBarItemColors(): NavigationBarItemColors = NavigationBarItemColors(
selectedIconColor = BitwardenTheme.colorScheme.icon.secondary,
unselectedIconColor = BitwardenTheme.colorScheme.icon.primary,
disabledIconColor = BitwardenTheme.colorScheme.outlineButton.foregroundDisabled,
selectedTextColor = BitwardenTheme.colorScheme.icon.secondary,
unselectedTextColor = BitwardenTheme.colorScheme.icon.primary,
disabledTextColor = BitwardenTheme.colorScheme.outlineButton.foregroundDisabled,
selectedIndicatorColor = Color.Transparent,
)

View file

@ -1,9 +1,9 @@
package com.x8bit.bitwarden.ui.platform.components.radio
import androidx.compose.material3.RadioButton
import androidx.compose.material3.RadioButtonDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.x8bit.bitwarden.ui.platform.components.radio.color.bitwardenRadioButtonColors
/**
* A custom Bitwarden-themed radio button.
@ -22,6 +22,6 @@ fun BitwardenRadioButton(
modifier = modifier,
selected = isSelected,
onClick = onClick,
colors = RadioButtonDefaults.colors(),
colors = bitwardenRadioButtonColors(),
)
}

View file

@ -0,0 +1,16 @@
package com.x8bit.bitwarden.ui.platform.components.radio.color
import androidx.compose.material3.RadioButtonColors
import androidx.compose.runtime.Composable
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Provides a default set of Bitwarden-styled colors for radio buttons.
*/
@Composable
fun bitwardenRadioButtonColors(): RadioButtonColors = RadioButtonColors(
selectedColor = BitwardenTheme.colorScheme.filledButton.background,
unselectedColor = BitwardenTheme.colorScheme.icon.primary,
disabledSelectedColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
disabledUnselectedColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
)

View file

@ -1,7 +1,6 @@
package com.x8bit.bitwarden.ui.platform.components.row
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@ -57,7 +56,7 @@ fun BitwardenExternalLinkRow(
modifier = Modifier.mirrorIfRtl(),
painter = rememberVectorPainter(id = R.drawable.ic_external_link),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface,
tint = BitwardenTheme.colorScheme.icon.primary,
)
}

View file

@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
@ -51,7 +50,9 @@ fun BitwardenTextRow(
.clickable(
enabled = isEnabled,
interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary),
indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = onClick,
)
.semantics(mergeDescendants = true) { },
@ -72,17 +73,21 @@ fun BitwardenTextRow(
Text(
text = text,
style = BitwardenTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurface.copy(
alpha = if (isEnabled) 1.0f else 0.38f,
),
color = if (isEnabled) {
BitwardenTheme.colorScheme.text.primary
} else {
BitwardenTheme.colorScheme.filledButton.foregroundDisabled
},
)
description?.let {
Text(
text = it,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant.copy(
alpha = if (isEnabled) 1.0f else 0.38f,
),
color = if (isEnabled) {
BitwardenTheme.colorScheme.text.secondary
} else {
BitwardenTheme.colorScheme.filledButton.foregroundDisabled
},
)
}
}

View file

@ -9,10 +9,8 @@ import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FabPosition
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.ScaffoldDefaults
import androidx.compose.material3.contentColorFor
import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults
import androidx.compose.material3.pulltorefresh.pullToRefresh
import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
@ -24,6 +22,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTagsAsResourceId
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Direct passthrough to [Scaffold] but contains a few specific override values. Everything is
@ -39,8 +38,8 @@ fun BitwardenScaffold(
floatingActionButton: @Composable () -> Unit = { },
floatingActionButtonPosition: FabPosition = FabPosition.End,
pullToRefreshState: BitwardenPullToRefreshState = rememberBitwardenPullToRefreshState(),
containerColor: Color = MaterialTheme.colorScheme.surface,
contentColor: Color = contentColorFor(containerColor),
containerColor: Color = BitwardenTheme.colorScheme.background.primary,
contentColor: Color = BitwardenTheme.colorScheme.text.primary,
contentWindowInsets: WindowInsets = ScaffoldDefaults
.contentWindowInsets
.exclude(WindowInsets.navigationBars),
@ -80,6 +79,8 @@ fun BitwardenScaffold(
.align(Alignment.TopCenter),
isRefreshing = pullToRefreshState.isRefreshing,
state = internalPullToRefreshState,
containerColor = BitwardenTheme.colorScheme.background.secondary,
color = BitwardenTheme.colorScheme.icon.secondary,
)
}
},

View file

@ -10,7 +10,7 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* A scrim that animates its visibility.
@ -33,7 +33,7 @@ fun BitwardenAnimatedScrim(
) {
Box(
modifier = modifier
.background(Color.Black.copy(alpha = 0.40f))
.background(BitwardenTheme.colorScheme.background.scrim)
.clickable(
interactionSource = remember { MutableInteractionSource() },
// Clear the ripple

View file

@ -8,6 +8,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTag
import com.x8bit.bitwarden.ui.platform.components.segment.color.bitwardenSegmentedButtonColors
import kotlinx.collections.immutable.ImmutableList
/**
@ -28,6 +29,7 @@ fun BitwardenSegmentedButton(
SegmentedButton(
selected = option.isChecked,
onClick = option.onClick,
colors = bitwardenSegmentedButtonColors(),
shape = SegmentedButtonDefaults.itemShape(
index = index,
count = options.size,

View file

@ -0,0 +1,24 @@
package com.x8bit.bitwarden.ui.platform.components.segment.color
import androidx.compose.material3.SegmentedButtonColors
import androidx.compose.runtime.Composable
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Provides a default set of Bitwarden-styled colors for segmented buttons.
*/
@Composable
fun bitwardenSegmentedButtonColors(): SegmentedButtonColors = SegmentedButtonColors(
activeContainerColor = BitwardenTheme.colorScheme.filledButton.backgroundReversed,
activeContentColor = BitwardenTheme.colorScheme.filledButton.foregroundReversed,
activeBorderColor = BitwardenTheme.colorScheme.stroke.divider,
inactiveContainerColor = BitwardenTheme.colorScheme.background.primary,
inactiveContentColor = BitwardenTheme.colorScheme.text.secondary,
inactiveBorderColor = BitwardenTheme.colorScheme.stroke.divider,
disabledActiveContainerColor = BitwardenTheme.colorScheme.background.primary,
disabledActiveContentColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
disabledActiveBorderColor = BitwardenTheme.colorScheme.stroke.divider,
disabledInactiveContainerColor = BitwardenTheme.colorScheme.background.primary,
disabledInactiveContentColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
disabledInactiveBorderColor = BitwardenTheme.colorScheme.stroke.divider,
)

View file

@ -22,7 +22,6 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onPreviewKeyEvent
@ -38,6 +37,8 @@ import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.toDp
import com.x8bit.bitwarden.ui.platform.components.field.color.bitwardenTextFieldColors
import com.x8bit.bitwarden.ui.platform.components.slider.color.bitwardenSliderColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
@ -89,6 +90,7 @@ fun BitwardenSlider(
},
singleLine = true,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
colors = bitwardenTextFieldColors(),
modifier = Modifier
.onPreviewKeyEvent { keyEvent ->
when (keyEvent.key) {
@ -111,23 +113,17 @@ fun BitwardenSlider(
.width(width = 16.dp + labelTextWidth + 16.dp),
)
val colors = SliderDefaults.colors(
activeTickColor = Color.Transparent,
inactiveTickColor = Color.Transparent,
disabledActiveTickColor = Color.Transparent,
disabledInactiveTickColor = Color.Transparent,
)
Slider(
value = sliderValue.toFloat(),
onValueChange = { newValue -> onValueChange(newValue.toInt(), true) },
onValueChangeFinished = { onValueChange(sliderValue, false) },
valueRange = range.start.toFloat()..range.endInclusive.toFloat(),
steps = range.endInclusive - 1,
colors = colors,
colors = bitwardenSliderColors(),
thumb = {
SliderDefaults.Thumb(
interactionSource = remember { MutableInteractionSource() },
colors = colors,
colors = bitwardenSliderColors(),
thumbSize = DpSize(width = 20.dp, height = 20.dp),
)
},
@ -135,7 +131,7 @@ fun BitwardenSlider(
SliderDefaults.Track(
modifier = Modifier.height(height = 4.dp),
drawStopIndicator = null,
colors = colors,
colors = bitwardenSliderColors(),
sliderState = sliderState,
thumbTrackGapSize = 0.dp,
)

View file

@ -0,0 +1,23 @@
package com.x8bit.bitwarden.ui.platform.components.slider.color
import androidx.compose.material3.SliderColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Provides a default set of Bitwarden-styled colors for sliders.
*/
@Composable
fun bitwardenSliderColors(): SliderColors = SliderColors(
thumbColor = BitwardenTheme.colorScheme.sliderButton.knobBackground,
activeTrackColor = BitwardenTheme.colorScheme.sliderButton.filled,
activeTickColor = Color.Transparent,
inactiveTrackColor = BitwardenTheme.colorScheme.sliderButton.unfilled,
inactiveTickColor = Color.Transparent,
disabledThumbColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
disabledActiveTrackColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
disabledActiveTickColor = Color.Transparent,
disabledInactiveTrackColor = BitwardenTheme.colorScheme.filledButton.backgroundDisabled,
disabledInactiveTickColor = Color.Transparent,
)

View file

@ -5,7 +5,6 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
@ -19,6 +18,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Represents a Bitwarden-styled clickable text.
@ -35,7 +35,7 @@ fun BitwardenClickableText(
modifier: Modifier = Modifier,
innerPadding: PaddingValues = PaddingValues(vertical = 4.dp, horizontal = 16.dp),
cornerSize: Dp = 28.dp,
color: Color = MaterialTheme.colorScheme.primary,
color: Color = BitwardenTheme.colorScheme.text.interaction,
) {
Text(
modifier = modifier
@ -43,7 +43,7 @@ fun BitwardenClickableText(
.clickable(
indication = ripple(
bounded = true,
color = MaterialTheme.colorScheme.primary,
color = BitwardenTheme.colorScheme.background.pressed,
),
interactionSource = remember { MutableInteractionSource() },
onClick = onClick,

View file

@ -1,9 +1,8 @@
package com.x8bit.bitwarden.ui.platform.components.text
import androidx.compose.foundation.border
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@ -32,14 +31,13 @@ fun BitwardenPolicyWarningText(
text = text,
textAlign = textAlign,
style = style,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.primary,
modifier = modifier
.border(
width = 1.dp,
color = MaterialTheme.colorScheme.primary,
shape = RoundedCornerShape(4.dp),
.background(
color = BitwardenTheme.colorScheme.background.tertiary,
shape = RoundedCornerShape(size = 8.dp),
)
.padding(8.dp),
.padding(all = 16.dp),
)
}

View file

@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.material3.ripple
@ -23,6 +22,7 @@ import androidx.compose.ui.semantics.toggleableState
import androidx.compose.ui.state.ToggleableState
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.components.toggle.color.bitwardenSwitchColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
@ -50,7 +50,9 @@ fun BitwardenSwitch(
if (onCheckedChange != null) {
this.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary),
indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = { onCheckedChange.invoke(!isChecked) },
)
} else {
@ -69,6 +71,7 @@ fun BitwardenSwitch(
.width(52.dp),
checked = isChecked,
onCheckedChange = null,
colors = bitwardenSwitchColors(),
)
Spacer(modifier = Modifier.width(16.dp))
@ -79,14 +82,14 @@ fun BitwardenSwitch(
Text(
text = label,
style = BitwardenTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurface,
color = BitwardenTheme.colorScheme.text.primary,
)
description?.let {
Text(
text = it,
style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
color = BitwardenTheme.colorScheme.text.secondary,
)
}

View file

@ -5,7 +5,6 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
@ -47,7 +46,9 @@ fun BitwardenSwitchWithActions(
modifier = Modifier
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary),
indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = { onCheckedChange?.invoke(!isChecked) },
)
.semantics(mergeDescendants = true) {

View file

@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.material3.ripple
@ -24,6 +23,7 @@ import androidx.compose.ui.semantics.toggleableState
import androidx.compose.ui.state.ToggleableState
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.components.toggle.color.bitwardenSwitchColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
@ -57,7 +57,9 @@ fun BitwardenWideSwitch(
.wrapContentHeight()
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary),
indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = { onCheckedChange?.invoke(!isChecked) },
enabled = !readOnly && enabled,
)
@ -76,9 +78,9 @@ fun BitwardenWideSwitch(
text = label,
style = BitwardenTheme.typography.bodyLarge,
color = if (enabled) {
MaterialTheme.colorScheme.onSurface
BitwardenTheme.colorScheme.text.primary
} else {
MaterialTheme.colorScheme.outline
BitwardenTheme.colorScheme.filledButton.foregroundDisabled
},
)
description?.let {
@ -86,9 +88,9 @@ fun BitwardenWideSwitch(
text = it,
style = BitwardenTheme.typography.bodyMedium,
color = if (enabled) {
MaterialTheme.colorScheme.onSurfaceVariant
BitwardenTheme.colorScheme.text.secondary
} else {
MaterialTheme.colorScheme.outline
BitwardenTheme.colorScheme.filledButton.foregroundDisabled
},
)
}
@ -102,6 +104,7 @@ fun BitwardenWideSwitch(
enabled = enabled,
checked = isChecked,
onCheckedChange = null,
colors = bitwardenSwitchColors(),
)
}
}

View file

@ -0,0 +1,29 @@
package com.x8bit.bitwarden.ui.platform.components.toggle.color
import androidx.compose.material3.SwitchColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Provides a default set of Bitwarden-styled colors for switches.
*/
@Composable
fun bitwardenSwitchColors(): SwitchColors = SwitchColors(
checkedThumbColor = BitwardenTheme.colorScheme.toggleButton.switch,
checkedTrackColor = BitwardenTheme.colorScheme.toggleButton.backgroundOn,
checkedBorderColor = Color.Transparent,
checkedIconColor = BitwardenTheme.colorScheme.toggleButton.backgroundOn,
uncheckedThumbColor = BitwardenTheme.colorScheme.toggleButton.switch,
uncheckedTrackColor = BitwardenTheme.colorScheme.toggleButton.backgroundOff,
uncheckedBorderColor = Color.Transparent,
uncheckedIconColor = BitwardenTheme.colorScheme.toggleButton.backgroundOn,
disabledCheckedThumbColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
disabledCheckedTrackColor = BitwardenTheme.colorScheme.filledButton.backgroundDisabled,
disabledCheckedBorderColor = Color.Transparent,
disabledCheckedIconColor = BitwardenTheme.colorScheme.filledButton.backgroundDisabled,
disabledUncheckedThumbColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
disabledUncheckedTrackColor = BitwardenTheme.colorScheme.filledButton.backgroundDisabled,
disabledUncheckedBorderColor = Color.Transparent,
disabledUncheckedIconColor = BitwardenTheme.colorScheme.filledButton.backgroundDisabled,
)

View file

@ -1,6 +1,5 @@
package com.x8bit.bitwarden.ui.platform.components.util
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
@ -10,6 +9,7 @@ import androidx.compose.ui.text.input.OffsetMapping
import androidx.compose.ui.text.input.TransformedText
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.withStyle
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Returns the [VisualTransformation] that alters the output of the text in an input field by
@ -17,8 +17,8 @@ import androidx.compose.ui.text.withStyle
*/
@Composable
fun nonLetterColorVisualTransformation(): VisualTransformation {
val digitColor = MaterialTheme.colorScheme.primary
val specialCharacterColor = MaterialTheme.colorScheme.error
val digitColor = BitwardenTheme.colorScheme.text.codeBlue
val specialCharacterColor = BitwardenTheme.colorScheme.text.codePink
return remember(digitColor, specialCharacterColor) {
NonLetterColorVisualTransformation(
digitColor = digitColor,

Some files were not shown because too many files have changed in this diff Show more