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.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -221,14 +220,14 @@ private fun OrderedHeaderContent() {
Text( Text(
text = stringResource(R.string.turn_on_autofill), text = stringResource(R.string.turn_on_autofill),
style = BitwardenTheme.typography.titleMedium, style = BitwardenTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
) )
Spacer(modifier = Modifier.height(8.dp)) Spacer(modifier = Modifier.height(8.dp))
Text( Text(
text = stringResource(R.string.use_autofill_to_log_into_your_accounts), text = stringResource(R.string.use_autofill_to_log_into_your_accounts),
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
// Apply similar line breaks to design // Apply similar line breaks to design
modifier = Modifier.sizeIn(maxWidth = 300.dp), 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.rememberScrollState
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface import androidx.compose.material3.Surface
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarDefaults
@ -92,7 +91,7 @@ private fun SetupCompleteContent(
Text( Text(
text = stringResource(R.string.youre_all_set), text = stringResource(R.string.youre_all_set),
style = BitwardenTheme.typography.titleMedium, style = BitwardenTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
modifier = Modifier modifier = Modifier
.align(CenterHorizontally) .align(CenterHorizontally)
@ -102,7 +101,7 @@ private fun SetupCompleteContent(
Text( Text(
text = stringResource(R.string.what_bitwarden_has_to_offer), text = stringResource(R.string.what_bitwarden_has_to_offer),
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
modifier = Modifier modifier = Modifier
.align(CenterHorizontally) .align(CenterHorizontally)

View file

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

View file

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

View file

@ -17,7 +17,6 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState import androidx.compose.material3.rememberTopAppBarState
@ -362,7 +361,7 @@ private fun LegacyHeaderContent(
userEmail, userEmail,
), ),
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.primary,
modifier = modifier modifier = modifier
.fillMaxWidth(), .fillMaxWidth(),
) )
@ -386,7 +385,7 @@ private fun OrderedHeaderContent() {
Text( Text(
text = stringResource(R.string.choose_your_master_password), text = stringResource(R.string.choose_your_master_password),
style = BitwardenTheme.typography.titleMedium, style = BitwardenTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
) )
Spacer(modifier = Modifier.height(8.dp)) 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, R.string.choose_a_unique_and_strong_password_to_keep_your_information_safe,
), ),
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
textAlign = TextAlign.Center, 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.size
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue 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.base.util.asText
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme 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]. * Draws a password indicator that displays password strength based on the given [state].
@ -56,12 +54,12 @@ fun PasswordStrengthIndicator(
label = "Width Percent State", label = "Width Percent State",
) )
val indicatorColor = when (state) { val indicatorColor = when (state) {
PasswordStrengthState.NONE -> MaterialTheme.colorScheme.error PasswordStrengthState.NONE -> BitwardenTheme.colorScheme.status.error
PasswordStrengthState.WEAK_1 -> MaterialTheme.colorScheme.error PasswordStrengthState.WEAK_1 -> BitwardenTheme.colorScheme.status.error
PasswordStrengthState.WEAK_2 -> MaterialTheme.colorScheme.error PasswordStrengthState.WEAK_2 -> BitwardenTheme.colorScheme.status.weak2
PasswordStrengthState.WEAK_3 -> LocalNonMaterialColors.current.passwordWeak PasswordStrengthState.WEAK_3 -> BitwardenTheme.colorScheme.status.weak2
PasswordStrengthState.GOOD -> MaterialTheme.colorScheme.primary PasswordStrengthState.GOOD -> BitwardenTheme.colorScheme.status.good
PasswordStrengthState.STRONG -> LocalNonMaterialColors.current.passwordStrong PasswordStrengthState.STRONG -> BitwardenTheme.colorScheme.status.strong
} }
val animatedIndicatorColor by animateColorAsState( val animatedIndicatorColor by animateColorAsState(
targetValue = indicatorColor, targetValue = indicatorColor,
@ -82,7 +80,7 @@ fun PasswordStrengthIndicator(
Modifier Modifier
.fillMaxWidth() .fillMaxWidth()
.height(4.dp) .height(4.dp)
.background(MaterialTheme.colorScheme.surfaceContainerHigh), .background(BitwardenTheme.colorScheme.sliderButton.unfilled),
) { ) {
Box( Box(
modifier = Modifier modifier = Modifier
@ -124,12 +122,11 @@ private fun MinimumCharacterCount(
minimumRequirementMet: Boolean, minimumRequirementMet: Boolean,
minimumCharacterCount: Int, minimumCharacterCount: Int,
) { ) {
val nonMaterialColors = LocalNonMaterialColors.current
val characterCountColor by animateColorAsState( val characterCountColor by animateColorAsState(
targetValue = if (minimumRequirementMet) { targetValue = if (minimumRequirementMet) {
nonMaterialColors.passwordStrong BitwardenTheme.colorScheme.status.strong
} else { } else {
MaterialTheme.colorScheme.surfaceDim BitwardenTheme.colorScheme.text.secondary
}, },
label = "minmumCharacterCountColor", label = "minmumCharacterCountColor",
) )

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState 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.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.testTag import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle import androidx.lifecycle.compose.collectAsStateWithLifecycle
@ -122,7 +122,7 @@ private fun SetPasswordScreenContent(
id = R.string.your_organization_requires_you_to_set_a_master_password, id = R.string.your_organization_requires_you_to_set_a_master_password,
), ),
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier modifier = Modifier
.padding(horizontal = 16.dp) .padding(horizontal = 16.dp)
.fillMaxWidth(), .fillMaxWidth(),
@ -132,6 +132,7 @@ private fun SetPasswordScreenContent(
BitwardenPolicyWarningText( BitwardenPolicyWarningText(
text = stringResource(id = R.string.reset_password_auto_enroll_invite_warning), text = stringResource(id = R.string.reset_password_auto_enroll_invite_warning),
textAlign = TextAlign.Start,
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
modifier = Modifier modifier = Modifier
.padding(horizontal = 16.dp) .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.text.ClickableText
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch import androidx.compose.material3.Switch
import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState 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.dropdown.EnvironmentSelector
import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField 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.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.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.composition.LocalIntentManager import com.x8bit.bitwarden.ui.platform.composition.LocalIntentManager
import com.x8bit.bitwarden.ui.platform.manager.intent.IntentManager import com.x8bit.bitwarden.ui.platform.manager.intent.IntentManager
@ -267,7 +267,7 @@ private fun StartRegistrationContent(
vectorIconRes = R.drawable.ic_tooltip_small, vectorIconRes = R.drawable.ic_tooltip_small,
contentDescription = stringResource(R.string.help_with_server_geolocations), contentDescription = stringResource(R.string.help_with_server_geolocations),
onClick = handler.onServerGeologyHelpClick, onClick = handler.onServerGeologyHelpClick,
contentColor = MaterialTheme.colorScheme.primary, contentColor = BitwardenTheme.colorScheme.icon.secondary,
// Align with design but keep accessible touch target of IconButton. // Align with design but keep accessible touch target of IconButton.
modifier = Modifier.offset(y = (-8f).dp, x = 16.dp), modifier = Modifier.offset(y = (-8f).dp, x = 16.dp),
) )
@ -324,7 +324,7 @@ private fun TermsAndPrivacyText(
append(strTermsAndPrivacy) append(strTermsAndPrivacy)
addStyle( addStyle(
style = SpanStyle( style = SpanStyle(
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
fontSize = BitwardenTheme.typography.bodyMedium.fontSize, fontSize = BitwardenTheme.typography.bodyMedium.fontSize,
), ),
start = 0, start = 0,
@ -332,7 +332,7 @@ private fun TermsAndPrivacyText(
) )
addStyle( addStyle(
style = SpanStyle( style = SpanStyle(
color = MaterialTheme.colorScheme.primary, color = BitwardenTheme.colorScheme.text.interaction,
fontSize = BitwardenTheme.typography.bodyMedium.fontSize, fontSize = BitwardenTheme.typography.bodyMedium.fontSize,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
), ),
@ -341,7 +341,7 @@ private fun TermsAndPrivacyText(
) )
addStyle( addStyle(
style = SpanStyle( style = SpanStyle(
color = MaterialTheme.colorScheme.primary, color = BitwardenTheme.colorScheme.text.interaction,
fontSize = BitwardenTheme.typography.bodyMedium.fontSize, fontSize = BitwardenTheme.typography.bodyMedium.fontSize,
fontWeight = FontWeight.Bold, 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), mainString = stringResource(id = R.string.get_emails_from_bitwarden_for_announcements_advices_and_research_opportunities_unsubscribe_any_time),
highlights = listOf(unsubscribeString), highlights = listOf(unsubscribeString),
tag = TAG_URL, tag = TAG_URL,
highlightStyle = SpanStyle(
color = BitwardenTheme.colorScheme.text.interaction,
fontSize = BitwardenTheme.typography.bodyMedium.fontSize,
fontWeight = FontWeight.Bold,
),
) )
Row( Row(
horizontalArrangement = Arrangement.Start, horizontalArrangement = Arrangement.Start,
@ -443,7 +448,9 @@ private fun ReceiveMarketingEmailsSwitch(
} }
.clickable( .clickable(
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary), indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = { onCheckedChange.invoke(!isChecked) }, onClick = { onCheckedChange.invoke(!isChecked) },
) )
.fillMaxWidth(), .fillMaxWidth(),
@ -454,6 +461,7 @@ private fun ReceiveMarketingEmailsSwitch(
.width(52.dp), .width(52.dp),
checked = isChecked, checked = isChecked,
onCheckedChange = null, onCheckedChange = null,
colors = bitwardenSwitchColors(),
) )
Spacer(modifier = Modifier.width(16.dp)) Spacer(modifier = Modifier.width(16.dp))
ClickableText( ClickableText(

View file

@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState import androidx.compose.material3.rememberTopAppBarState
@ -186,7 +185,7 @@ private fun TrustedDeviceScaffold(
state.environmentLabel, state.environmentLabel,
), ),
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.secondary,
modifier = Modifier modifier = Modifier
.testTag("LoggingInAsLabel") .testTag("LoggingInAsLabel")
.padding(horizontal = 16.dp) .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.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState import androidx.compose.material3.rememberTopAppBarState
@ -225,7 +224,7 @@ private fun TwoFactorLoginScreenContent(
text = state.authMethod.description(state.displayEmail)(), text = state.authMethod.description(state.displayEmail)(),
textAlign = TextAlign.Start, textAlign = TextAlign.Start,
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier modifier = Modifier
.padding(horizontal = 16.dp) .padding(horizontal = 16.dp)
.fillMaxWidth(), .fillMaxWidth(),

View file

@ -14,7 +14,6 @@ import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState import androidx.compose.material3.rememberTopAppBarState
@ -240,7 +239,7 @@ fun VaultUnlockScreen(
Text( Text(
text = state.vaultUnlockType.unlockScreenMessage(), text = state.vaultUnlockType.unlockScreenMessage(),
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier modifier = Modifier
.padding(horizontal = 16.dp) .padding(horizontal = 16.dp)
.fillMaxWidth(), .fillMaxWidth(),
@ -254,7 +253,7 @@ fun VaultUnlockScreen(
state.environmentUrl, state.environmentUrl,
), ),
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier modifier = Modifier
.testTag("UserAndEnvironmentDataLabel") .testTag("UserAndEnvironmentDataLabel")
.padding(horizontal = 16.dp) .padding(horizontal = 16.dp)
@ -277,7 +276,7 @@ fun VaultUnlockScreen(
text = stringResource(R.string.account_biometric_invalidated), text = stringResource(R.string.account_biometric_invalidated),
textAlign = TextAlign.Start, textAlign = TextAlign.Start,
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.error, color = BitwardenTheme.colorScheme.status.error,
modifier = Modifier.padding(horizontal = 16.dp), modifier = Modifier.padding(horizontal = 16.dp),
) )
Spacer(modifier = Modifier.height(12.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.rememberScrollState
import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.LaunchedEffect
@ -78,6 +77,8 @@ fun WelcomeScreen(
BitwardenScaffold( BitwardenScaffold(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
containerColor = BitwardenTheme.colorScheme.background.secondary,
contentColor = BitwardenTheme.colorScheme.text.secondary,
) { innerPadding -> ) { innerPadding ->
WelcomeScreenContent( WelcomeScreenContent(
state = state, state = state,
@ -191,7 +192,7 @@ private fun WelcomeCardLandscape(
text = stringResource(id = state.titleRes), text = stringResource(id = state.titleRes),
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
style = BitwardenTheme.typography.headlineMedium, style = BitwardenTheme.typography.headlineMedium,
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.padding(bottom = 16.dp), modifier = Modifier.padding(bottom = 16.dp),
) )
@ -199,7 +200,7 @@ private fun WelcomeCardLandscape(
text = stringResource(id = state.messageRes), text = stringResource(id = state.messageRes),
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
style = BitwardenTheme.typography.bodyLarge, 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), text = stringResource(id = state.titleRes),
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
style = BitwardenTheme.typography.headlineMedium, style = BitwardenTheme.typography.headlineMedium,
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier modifier = Modifier
.padding( .padding(
top = 48.dp, top = 48.dp,
@ -236,7 +237,7 @@ private fun WelcomeCardPortrait(
text = stringResource(id = state.messageRes), text = stringResource(id = state.messageRes),
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
style = BitwardenTheme.typography.bodyLarge, style = BitwardenTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
) )
} }
} }
@ -255,11 +256,9 @@ private fun IndicatorDots(
) { ) {
items(totalCount) { index -> items(totalCount) { index ->
val color = animateColorAsState( val color = animateColorAsState(
targetValue = if (index == selectedIndexProvider()) { targetValue = BitwardenTheme.colorScheme.text.primary.copy(
MaterialTheme.colorScheme.onSurface alpha = if (index == selectedIndexProvider()) 1.0f else 0.3f,
} else { ),
MaterialTheme.colorScheme.onSurface.copy(alpha = 0.3f)
},
label = "dotColor", label = "dotColor",
) )

View file

@ -3,11 +3,16 @@ package com.x8bit.bitwarden.ui.autofill
import android.content.Context import android.content.Context
import android.widget.RemoteViews import android.widget.RemoteViews
import androidx.annotation.DrawableRes 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.R
import com.x8bit.bitwarden.data.autofill.model.AutofillAppInfo import com.x8bit.bitwarden.data.autofill.model.AutofillAppInfo
import com.x8bit.bitwarden.data.autofill.model.AutofillCipher import com.x8bit.bitwarden.data.autofill.model.AutofillCipher
import com.x8bit.bitwarden.ui.autofill.util.getAutofillSuggestionContentDescription import com.x8bit.bitwarden.ui.autofill.util.getAutofillSuggestionContentDescription
import com.x8bit.bitwarden.ui.autofill.util.isSystemDarkMode 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. * Build [RemoteViews] for representing an autofill suggestion.
@ -85,37 +90,31 @@ private fun buildAutofillRemoteViews(
setInt( setInt(
R.id.container, R.id.container,
"setBackgroundColor", "setBackgroundColor",
autofillAppInfo.context.surface, autofillAppInfo.context.background.toArgb(),
) )
setInt( setInt(
R.id.title, R.id.title,
"setTextColor", "setTextColor",
autofillAppInfo.context.onSurface, autofillAppInfo.context.primaryText.toArgb(),
) )
setInt( setInt(
R.id.subtitle, R.id.subtitle,
"setTextColor", "setTextColor",
autofillAppInfo.context.onSurfaceVariant, autofillAppInfo.context.secondaryText.toArgb(),
) )
if (shouldTintIcon) { if (shouldTintIcon) {
setInt( setInt(
R.id.icon, R.id.icon,
"setColorFilter", "setColorFilter",
autofillAppInfo.context.onSurface, autofillAppInfo.context.iconTint.toArgb(),
) )
} }
} }
private val Context.onSurface: Int private val Context.bitwardenColorScheme: BitwardenColorScheme
get() = getColor( get() = if (isSystemDarkMode) darkBitwardenColorScheme else lightBitwardenColorScheme
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.surface: Int val Context.iconTint: Color get() = bitwardenColorScheme.icon.primary
get() = getColor( private val Context.primaryText: Color get() = bitwardenColorScheme.text.primary
if (isSystemDarkMode) R.color.dark_surface else R.color.surface, 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.annotation.RequiresApi
import androidx.autofill.inline.UiVersions import androidx.autofill.inline.UiVersions
import androidx.autofill.inline.v1.InlineSuggestionUi import androidx.autofill.inline.v1.InlineSuggestionUi
import androidx.compose.ui.graphics.toArgb
import com.x8bit.bitwarden.R import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.data.autofill.model.AutofillAppInfo import com.x8bit.bitwarden.data.autofill.model.AutofillAppInfo
import com.x8bit.bitwarden.data.autofill.model.AutofillCipher 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 * Try creating an [InlinePresentation] for [autofillCipher] with this [InlinePresentationSpec]. If
@ -91,7 +93,7 @@ private fun InlinePresentationSpec.createInlinePresentationOrNull(
) )
.run { .run {
if (shouldTintIcon) { if (shouldTintIcon) {
setTint(autofillAppInfo.contentColor) setTint(autofillAppInfo.context.iconTint.toArgb())
} else { } else {
// Remove tinting // Remove tinting
setTintBlendMode(BlendMode.DST) setTintBlendMode(BlendMode.DST)
@ -121,17 +123,3 @@ private fun InlinePresentationSpec.createInlinePresentationOrNull(
false, 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 package com.x8bit.bitwarden.ui.platform.base.util
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.Stable import androidx.compose.runtime.Stable
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.luminance 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 * 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 @Composable
fun Color.toSafeOverlayColor(): Color { fun Color.toSafeOverlayColor(): Color {
val surfaceColor = MaterialTheme.colorScheme.surface val surfaceColor = BitwardenTheme.colorScheme.background.primary
val onSurfaceColor = MaterialTheme.colorScheme.onSurface val onSurfaceColor = BitwardenTheme.colorScheme.text.primary
val lightColor: Color val lightColor: Color
val darkColor: Color val darkColor: Color
if (surfaceColor.luminance() > onSurfaceColor.luminance()) { 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.foundation.layout.padding
import androidx.compose.material3.DividerDefaults import androidx.compose.material3.DividerDefaults
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.Stable 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.LayoutDirection
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.data.platform.annotation.OmitFromCoverage import com.x8bit.bitwarden.data.platform.annotation.OmitFromCoverage
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import com.x8bit.bitwarden.ui.platform.util.isPortrait import com.x8bit.bitwarden.ui.platform.util.isPortrait
/** /**
@ -41,8 +41,8 @@ import com.x8bit.bitwarden.ui.platform.util.isPortrait
fun Modifier.scrolledContainerBackground( fun Modifier.scrolledContainerBackground(
topAppBarScrollBehavior: TopAppBarScrollBehavior, topAppBarScrollBehavior: TopAppBarScrollBehavior,
): Modifier { ): Modifier {
val expandedColor = MaterialTheme.colorScheme.surface val expandedColor = BitwardenTheme.colorScheme.background.secondary
val collapsedColor = MaterialTheme.colorScheme.surfaceContainer val collapsedColor = BitwardenTheme.colorScheme.background.secondary
return CombinedModifier( return CombinedModifier(
outer = this, outer = this,
inner = drawBehind { inner = drawBehind {
@ -66,7 +66,7 @@ fun Modifier.bottomDivider(
paddingStart: Dp = 0.dp, paddingStart: Dp = 0.dp,
paddingEnd: Dp = 0.dp, paddingEnd: Dp = 0.dp,
thickness: Dp = DividerDefaults.Thickness, thickness: Dp = DividerDefaults.Thickness,
color: Color = DividerDefaults.color, color: Color = BitwardenTheme.colorScheme.stroke.divider,
enabled: Boolean = true, enabled: Boolean = true,
): Modifier = drawWithCache { ): Modifier = drawWithCache {
onDrawWithContent { onDrawWithContent {

View file

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

View file

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

View file

@ -23,7 +23,6 @@ import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.material3.TopAppBarScrollBehavior
@ -274,7 +273,9 @@ private fun AccountSummaryItem(
.testTag("AccountCell") .testTag("AccountCell")
.combinedClickable( .combinedClickable(
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary), indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = { onSwitchAccountClick(accountSummary) }, onClick = { onSwitchAccountClick(accountSummary) },
onLongClick = { onSwitchAccountLongClick(accountSummary) }, onLongClick = { onSwitchAccountLongClick(accountSummary) },
) )
@ -317,7 +318,7 @@ private fun AccountSummaryItem(
Text( Text(
text = accountSummary.environmentLabel, text = accountSummary.environmentLabel,
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.secondary,
modifier = Modifier.testTag("AccountEnvironmentLabel"), modifier = Modifier.testTag("AccountEnvironmentLabel"),
) )
@ -325,7 +326,7 @@ private fun AccountSummaryItem(
Text( Text(
text = stringResource(id = supportingTextResId).lowercaseWithCurrentLocal(), text = stringResource(id = supportingTextResId).lowercaseWithCurrentLocal(),
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.secondary,
modifier = Modifier.testTag("AccountStatusLabel"), modifier = Modifier.testTag("AccountStatusLabel"),
) )
} }
@ -336,7 +337,10 @@ private fun AccountSummaryItem(
Icon( Icon(
painter = rememberVectorPainter(id = accountSummary.iconRes), painter = rememberVectorPainter(id = accountSummary.iconRes),
contentDescription = null, contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface, tint = when (accountSummary.status) {
AccountSummary.Status.ACTIVE -> BitwardenTheme.colorScheme.icon.secondary
else -> BitwardenTheme.colorScheme.icon.primary
},
modifier = Modifier modifier = Modifier
.testTag(accountSummary.iconTestTag) .testTag(accountSummary.iconTestTag)
.size(24.dp), .size(24.dp),
@ -396,7 +400,9 @@ private fun AddAccountItem(
modifier = Modifier modifier = Modifier
.clickable( .clickable(
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary), indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = onClick, onClick = onClick,
) )
.padding(vertical = 8.dp) .padding(vertical = 8.dp)
@ -405,7 +411,7 @@ private fun AddAccountItem(
Icon( Icon(
painter = rememberVectorPainter(id = R.drawable.ic_plus), painter = rememberVectorPainter(id = R.drawable.ic_plus),
contentDescription = null, contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface, tint = BitwardenTheme.colorScheme.icon.secondary,
modifier = Modifier modifier = Modifier
.padding(vertical = 8.dp) .padding(vertical = 8.dp)
.size(24.dp), .size(24.dp),
@ -416,6 +422,7 @@ private fun AddAccountItem(
Text( Text(
text = stringResource(id = R.string.add_account), text = stringResource(id = R.string.add_account),
style = BitwardenTheme.typography.bodyLarge, 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.Icon
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource 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.semantics.testTag
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R 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.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.feature.settings.appearance.model.AppTheme import com.x8bit.bitwarden.ui.platform.feature.settings.appearance.model.AppTheme
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -25,18 +25,19 @@ fun BitwardenPlaceholderAccountActionItem(
) { ) {
IconButton( IconButton(
onClick = onClick, onClick = onClick,
colors = bitwardenStandardIconButtonColors(),
modifier = Modifier modifier = Modifier
.semantics(mergeDescendants = true) { testTag = "CurrentActiveAccount" }, .semantics(mergeDescendants = true) { testTag = "CurrentActiveAccount" },
) { ) {
Icon( Icon(
painter = rememberVectorPainter(id = R.drawable.ic_account_initials_container), painter = rememberVectorPainter(id = R.drawable.ic_account_initials_container),
contentDescription = null, contentDescription = null,
tint = MaterialTheme.colorScheme.secondaryContainer, tint = BitwardenTheme.colorScheme.background.tertiary,
) )
Icon( Icon(
painter = rememberVectorPainter(id = R.drawable.ic_dots), painter = rememberVectorPainter(id = R.drawable.ic_dots),
contentDescription = stringResource(id = R.string.account), 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.platform.testTag
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R 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.components.button.BitwardenStandardIconButton
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -40,13 +41,7 @@ fun BitwardenMediumTopAppBar(
actions: @Composable RowScope.() -> Unit = {}, actions: @Composable RowScope.() -> Unit = {},
) { ) {
MediumTopAppBar( MediumTopAppBar(
colors = TopAppBarDefaults.largeTopAppBarColors( colors = bitwardenTopAppBarColors(),
containerColor = MaterialTheme.colorScheme.surface,
scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainer,
navigationIconContentColor = MaterialTheme.colorScheme.onSurface,
titleContentColor = MaterialTheme.colorScheme.onSurface,
actionIconContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
),
scrollBehavior = scrollBehavior, scrollBehavior = scrollBehavior,
title = { title = {
Text( Text(
@ -76,7 +71,6 @@ private fun BitwardenMediumTopAppBar_preview() {
vectorIconRes = R.drawable.ic_more, vectorIconRes = R.drawable.ic_more,
contentDescription = "", contentDescription = "",
onClick = { }, 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.layout.fillMaxWidth
import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TextField import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.TopAppBar import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect 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.R
import com.x8bit.bitwarden.ui.platform.base.util.mirrorIfRtl import com.x8bit.bitwarden.ui.platform.base.util.mirrorIfRtl
import com.x8bit.bitwarden.ui.platform.base.util.tabNavigation 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.button.BitwardenStandardIconButton
import com.x8bit.bitwarden.ui.platform.components.field.color.bitwardenTextFieldColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
@ -47,13 +46,7 @@ fun BitwardenSearchTopAppBar(
val focusRequester = remember { FocusRequester() } val focusRequester = remember { FocusRequester() }
TopAppBar( TopAppBar(
modifier = modifier.testTag("HeaderBarComponent"), modifier = modifier.testTag("HeaderBarComponent"),
colors = TopAppBarDefaults.topAppBarColors( colors = bitwardenTopAppBarColors(),
containerColor = MaterialTheme.colorScheme.surface,
scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainer,
navigationIconContentColor = MaterialTheme.colorScheme.onSurface,
titleContentColor = MaterialTheme.colorScheme.onSurface,
actionIconContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
),
scrollBehavior = scrollBehavior, scrollBehavior = scrollBehavior,
navigationIcon = { navigationIcon = {
navigationIcon?.let { navigationIcon?.let {
@ -69,11 +62,9 @@ fun BitwardenSearchTopAppBar(
}, },
title = { title = {
TextField( TextField(
colors = TextFieldDefaults.colors( colors = bitwardenTextFieldColors(
focusedContainerColor = Color.Transparent, focusedBorderColor = Color.Transparent,
unfocusedContainerColor = Color.Transparent, unfocusedBorderColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
), ),
textStyle = BitwardenTheme.typography.bodyLarge, textStyle = BitwardenTheme.typography.bodyLarge,
placeholder = { Text(text = placeholder) }, 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.foundation.layout.RowScope
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MediumTopAppBar import androidx.compose.material3.MediumTopAppBar
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar import androidx.compose.material3.TopAppBar
@ -22,6 +21,7 @@ import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.mirrorIfRtl 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.button.BitwardenStandardIconButton
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme 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) { if (titleTextHasOverflow) {
MediumTopAppBar( MediumTopAppBar(
colors = topAppBarColors, colors = bitwardenTopAppBarColors(),
scrollBehavior = scrollBehavior, scrollBehavior = scrollBehavior,
navigationIcon = navigationIconContent, navigationIcon = navigationIconContent,
title = { title = {
@ -129,7 +121,7 @@ fun BitwardenTopAppBar(
) )
} else { } else {
TopAppBar( TopAppBar(
colors = topAppBarColors, colors = bitwardenTopAppBarColors(),
scrollBehavior = scrollBehavior, scrollBehavior = scrollBehavior,
navigationIcon = navigationIconContent, navigationIcon = navigationIconContent,
title = { title = {

View file

@ -1,12 +1,10 @@
package com.x8bit.bitwarden.ui.platform.components.appbar.action 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.Box
import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.layout.widthIn
import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue 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.DpOffset
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R 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.components.button.BitwardenStandardIconButton
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import kotlinx.collections.immutable.ImmutableList import kotlinx.collections.immutable.ImmutableList
@ -62,13 +61,13 @@ fun BitwardenOverflowActionItem(
expanded = isOverflowMenuVisible, expanded = isOverflowMenuVisible,
onDismissRequest = { isOverflowMenuVisible = false }, onDismissRequest = { isOverflowMenuVisible = false },
offset = DpOffset(x = (-12).dp, y = 0.dp), offset = DpOffset(x = (-12).dp, y = 0.dp),
containerColor = BitwardenTheme.colorScheme.background.primary,
modifier = Modifier modifier = Modifier
.semantics { testTagsAsResourceId = true } .semantics { testTagsAsResourceId = true }
.widthIn( .widthIn(
min = 112.dp, min = 112.dp,
max = 280.dp, max = 280.dp,
) ),
.background(MaterialTheme.colorScheme.surfaceContainer),
content = { content = {
menuItemDataList.forEach { dropdownMenuItemData -> menuItemDataList.forEach { dropdownMenuItemData ->
DropdownMenuItem( DropdownMenuItem(
@ -77,6 +76,7 @@ fun BitwardenOverflowActionItem(
testTag = it testTag = it
} }
}, },
colors = bitwardenMenuItemColors(),
text = { text = {
Text( Text(
text = dropdownMenuItemData.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.Column
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Badge import androidx.compose.material3.Badge
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier 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.tooling.preview.Preview
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import com.x8bit.bitwarden.ui.platform.theme.LocalNonMaterialColors
/** /**
* Reusable component for displaying a notification badge. * Reusable component for displaying a notification badge.
@ -30,8 +28,8 @@ fun NotificationBadge(
notificationCount: Int, notificationCount: Int,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
isVisible: Boolean = true, isVisible: Boolean = true,
backgroundColor: Color = LocalNonMaterialColors.current.fingerprint, backgroundColor: Color = BitwardenTheme.colorScheme.icon.badgeBackground,
contentColor: Color = MaterialTheme.colorScheme.onSecondary, contentColor: Color = BitwardenTheme.colorScheme.icon.badgeForeground,
) { ) {
AnimatedVisibility( AnimatedVisibility(
visible = isVisible, 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.foundation.layout.PaddingValues
import androidx.compose.material3.Button import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview 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.color.bitwardenFilledButtonColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
@ -34,7 +34,7 @@ fun BitwardenFilledButton(
vertical = 10.dp, vertical = 10.dp,
horizontal = 24.dp, horizontal = 24.dp,
), ),
colors = ButtonDefaults.buttonColors(), colors = bitwardenFilledButtonColors(),
) { ) {
Text( Text(
text = label, 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.PaddingValues
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable 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.tooling.preview.Preview
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R 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.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -42,7 +42,7 @@ fun BitwardenFilledButtonWithIcon(
vertical = 10.dp, vertical = 10.dp,
horizontal = 24.dp, horizontal = 24.dp,
), ),
colors = ButtonDefaults.buttonColors(), colors = bitwardenFilledButtonColors(),
) { ) {
Icon( Icon(
painter = 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.foundation.layout.PaddingValues
import androidx.compose.material3.Button import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview 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.color.bitwardenFilledErrorButtonColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
@ -35,10 +34,7 @@ fun BitwardenFilledErrorButton(
vertical = 10.dp, vertical = 10.dp,
horizontal = 24.dp, horizontal = 24.dp,
), ),
colors = ButtonDefaults.buttonColors( colors = bitwardenFilledErrorButtonColors(),
containerColor = MaterialTheme.colorScheme.error,
contentColor = MaterialTheme.colorScheme.onError,
),
) { ) {
Text( Text(
text = label, text = label,

View file

@ -3,13 +3,12 @@ package com.x8bit.bitwarden.ui.platform.components.button
import androidx.annotation.DrawableRes import androidx.annotation.DrawableRes
import androidx.compose.material3.FilledIconButton import androidx.compose.material3.FilledIconButton
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R 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.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -33,12 +32,7 @@ fun BitwardenFilledIconButton(
FilledIconButton( FilledIconButton(
modifier = modifier.semantics(mergeDescendants = true) {}, modifier = modifier.semantics(mergeDescendants = true) {},
onClick = onClick, onClick = onClick,
colors = IconButtonDefaults.filledIconButtonColors( colors = bitwardenFilledIconButtonColors(),
containerColor = MaterialTheme.colorScheme.secondaryContainer,
contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
disabledContainerColor = MaterialTheme.colorScheme.onSurface.copy(alpha = .12f),
disabledContentColor = MaterialTheme.colorScheme.onSecondaryContainer,
),
enabled = isEnabled, enabled = isEnabled,
) { ) {
Icon( 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.PaddingValues
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview 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.color.bitwardenFilledTonalButtonColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
* A filled tonal button for the Bitwarden UI with a customized appearance. * 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 label The text to be displayed on the button.
* @param onClick A lambda which will be invoked when the button is clicked. * @param onClick A lambda which will be invoked when the button is clicked.
* @param isEnabled Whether or not the button is enabled. * @param isEnabled Whether or not the button is enabled.
@ -38,7 +34,7 @@ fun BitwardenFilledTonalButton(
horizontal = 24.dp, horizontal = 24.dp,
), ),
enabled = isEnabled, enabled = isEnabled,
colors = ButtonDefaults.filledTonalButtonColors(), colors = bitwardenFilledTonalButtonColors(),
modifier = modifier, modifier = modifier,
) { ) {
Text( 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.PaddingValues
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier 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.tooling.preview.Preview
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R 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.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
* A filled tonal button for the Bitwarden UI with a customized appearance and an icon. * 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 label The text to be displayed on the button.
* @param icon The icon for the button. * @param icon The icon for the button.
* @param onClick A lambda which will be invoked when the button is clicked. * @param onClick A lambda which will be invoked when the button is clicked.
@ -43,7 +39,7 @@ fun BitwardenFilledTonalButtonWithIcon(
vertical = 10.dp, vertical = 10.dp,
horizontal = 24.dp, horizontal = 24.dp,
), ),
colors = ButtonDefaults.filledTonalButtonColors(), colors = bitwardenFilledTonalButtonColors(),
modifier = modifier, modifier = modifier,
enabled = isEnabled, enabled = isEnabled,
) { ) {

View file

@ -1,7 +1,7 @@
package com.x8bit.bitwarden.ui.platform.components.button package com.x8bit.bitwarden.ui.platform.components.button
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.OutlinedButton import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -9,6 +9,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview 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.color.bitwardenOutlinedButtonColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
@ -35,7 +36,15 @@ fun BitwardenOutlinedButton(
vertical = 10.dp, vertical = 10.dp,
horizontal = 24.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(
text = label, text = label,

View file

@ -1,8 +1,8 @@
package com.x8bit.bitwarden.ui.platform.components.button package com.x8bit.bitwarden.ui.platform.components.button
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedButton import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text 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.tooling.preview.Preview
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R 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.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -42,7 +43,15 @@ fun BitwardenOutlinedButtonWithIcon(
vertical = 10.dp, vertical = 10.dp,
horizontal = 24.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( Icon(
painter = 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.BorderStroke
import androidx.compose.foundation.layout.PaddingValues 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.OutlinedButton
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -11,6 +9,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview 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.color.bitwardenOutlinedErrorButtonColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
@ -36,12 +35,10 @@ fun BitwardenOutlinedErrorButton(
vertical = 10.dp, vertical = 10.dp,
horizontal = 24.dp, horizontal = 24.dp,
), ),
colors = ButtonDefaults.outlinedButtonColors( colors = bitwardenOutlinedErrorButtonColors(),
contentColor = MaterialTheme.colorScheme.error,
),
border = BorderStroke( border = BorderStroke(
width = 1.dp, width = 1.dp,
color = MaterialTheme.colorScheme.error.copy( color = BitwardenTheme.colorScheme.status.error.copy(
alpha = if (isEnabled) 1f else 0.12f, 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.annotation.DrawableRes
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.LocalContentColor
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color 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.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R 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.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -31,7 +30,7 @@ fun BitwardenStandardIconButton(
onClick: () -> Unit, onClick: () -> Unit,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
isEnabled: Boolean = true, isEnabled: Boolean = true,
contentColor: Color = LocalContentColor.current, contentColor: Color = BitwardenTheme.colorScheme.icon.primary,
) { ) {
BitwardenStandardIconButton( BitwardenStandardIconButton(
painter = rememberVectorPainter(id = vectorIconRes), painter = rememberVectorPainter(id = vectorIconRes),
@ -59,14 +58,12 @@ fun BitwardenStandardIconButton(
onClick: () -> Unit, onClick: () -> Unit,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
isEnabled: Boolean = true, isEnabled: Boolean = true,
contentColor: Color = LocalContentColor.current, contentColor: Color = BitwardenTheme.colorScheme.icon.primary,
) { ) {
IconButton( IconButton(
modifier = modifier.semantics(mergeDescendants = true) {}, modifier = modifier.semantics(mergeDescendants = true) {},
onClick = onClick, onClick = onClick,
colors = IconButtonDefaults.iconButtonColors( colors = bitwardenStandardIconButtonColors(contentColor = contentColor),
contentColor = contentColor,
),
enabled = isEnabled, enabled = isEnabled,
) { ) {
Icon( Icon(

View file

@ -1,7 +1,6 @@
package com.x8bit.bitwarden.ui.platform.components.button package com.x8bit.bitwarden.ui.platform.components.button
import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TextButton import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -9,6 +8,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview 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.color.bitwardenTextButtonColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
@ -25,16 +25,8 @@ fun BitwardenTextButton(
onClick: () -> Unit, onClick: () -> Unit,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
isEnabled: Boolean = true, 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( TextButton(
onClick = onClick, onClick = onClick,
modifier = modifier, modifier = modifier,
@ -43,7 +35,7 @@ fun BitwardenTextButton(
vertical = 10.dp, vertical = 10.dp,
horizontal = 24.dp, horizontal = 24.dp,
), ),
colors = defaultColors, colors = bitwardenTextButtonColors(contentColor = labelTextColor),
) { ) {
Text( Text(
text = label, 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.badge.NotificationBadge
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenFilledButton 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.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.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -50,9 +51,7 @@ fun BitwardenActionCard(
Card( Card(
modifier = modifier, modifier = modifier,
shape = RoundedCornerShape(12.dp), shape = RoundedCornerShape(12.dp),
colors = CardDefaults.cardColors( colors = bitwardenCardColors(),
containerColor = BitwardenTheme.colorScheme.background.tertiary,
),
elevation = CardDefaults.elevatedCardElevation(), elevation = CardDefaults.elevatedCardElevation(),
border = BorderStroke(width = 1.dp, color = BitwardenTheme.colorScheme.stroke.border), border = BorderStroke(width = 1.dp, color = BitwardenTheme.colorScheme.stroke.border),
) { ) {
@ -77,13 +76,12 @@ fun BitwardenActionCard(
painter = rememberVectorPainter(id = R.drawable.ic_close), painter = rememberVectorPainter(id = R.drawable.ic_close),
contentDescription = stringResource(id = R.string.close), contentDescription = stringResource(id = R.string.close),
onClick = onDismissClick, onClick = onDismissClick,
contentColor = BitwardenTheme.colorScheme.icon.primary,
modifier = Modifier.offset(x = 8.dp), modifier = Modifier.offset(x = 8.dp),
) )
} }
Spacer(Modifier.height(16.dp)) Spacer(Modifier.height(16.dp))
BitwardenFilledButton( BitwardenFilledButton(
actionText, label = actionText,
onClick = onActionClick, onClick = onActionClick,
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
) )

View file

@ -1,5 +1,6 @@
package com.x8bit.bitwarden.ui.platform.components.card package com.x8bit.bitwarden.ui.platform.components.card
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column 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.Card
import androidx.compose.material3.CardDefaults import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment 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.tooling.preview.Preview
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R 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.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -40,12 +41,11 @@ fun BitwardenActionCardSmall(
) { ) {
Card( Card(
onClick = onCardClicked, onClick = onCardClicked,
shape = RoundedCornerShape(size = 16.dp), shape = RoundedCornerShape(size = 12.dp),
modifier = modifier, modifier = modifier,
colors = CardDefaults.cardColors( colors = bitwardenCardColors(),
containerColor = BitwardenTheme.colorScheme.background.tertiary,
),
elevation = CardDefaults.elevatedCardElevation(), elevation = CardDefaults.elevatedCardElevation(),
border = BorderStroke(width = 1.dp, color = BitwardenTheme.colorScheme.stroke.border),
) { ) {
Row( Row(
modifier = Modifier modifier = Modifier
@ -111,7 +111,7 @@ private fun ActionCardSmallWithTrailingIcon_preview() {
Icon( Icon(
painter = rememberVectorPainter(id = R.drawable.ic_navigate_next), painter = rememberVectorPainter(id = R.drawable.ic_navigate_next),
contentDescription = null, 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.layout.padding
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
@ -38,7 +37,7 @@ fun BitwardenErrorContent(
Spacer(modifier = Modifier.weight(1f)) Spacer(modifier = Modifier.weight(1f))
Text( Text(
text = message, text = message,
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
modifier = Modifier modifier = Modifier

View file

@ -2,7 +2,6 @@ package com.x8bit.bitwarden.ui.platform.components.dialog
import android.os.Parcelable import android.os.Parcelable
import androidx.compose.material3.AlertDialog import androidx.compose.material3.AlertDialog
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.ExperimentalComposeUiApi
@ -60,7 +59,10 @@ fun BitwardenBasicDialog(
modifier = Modifier.testTag("AlertContentText"), 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 { modifier = Modifier.semantics {
testTagsAsResourceId = true testTagsAsResourceId = true
testTag = "AlertPopup" 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.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.material3.DatePicker import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerColors
import androidx.compose.material3.DatePickerDialog import androidx.compose.material3.DatePickerDialog
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.rememberDatePickerState import androidx.compose.material3.rememberDatePickerState
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue 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.testTag
import androidx.compose.ui.semantics.testTagsAsResourceId import androidx.compose.ui.semantics.testTagsAsResourceId
import com.x8bit.bitwarden.R 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.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import com.x8bit.bitwarden.ui.platform.util.orNow import com.x8bit.bitwarden.ui.platform.util.orNow
@ -93,18 +94,10 @@ fun BitwardenDateSelectButton(
Icon( Icon(
painter = rememberVectorPainter(id = R.drawable.ic_region_select_dropdown), painter = rememberVectorPainter(id = R.drawable.ic_region_select_dropdown),
contentDescription = null, contentDescription = null,
tint = MaterialTheme.colorScheme.onSurfaceVariant, tint = BitwardenTheme.colorScheme.icon.primary,
) )
}, },
colors = OutlinedTextFieldDefaults.colors( colors = bitwardenTextFieldButtonColors(),
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,
),
) )
if (shouldShowDialog) { if (shouldShowDialog) {
@ -112,9 +105,11 @@ fun BitwardenDateSelectButton(
initialSelectedDateMillis = currentZonedDateTime.orNow().toInstant().toEpochMilli(), initialSelectedDateMillis = currentZonedDateTime.orNow().toInstant().toEpochMilli(),
) )
DatePickerDialog( DatePickerDialog(
colors = bitwardenDatePickerColors(),
onDismissRequest = { shouldShowDialog = false }, onDismissRequest = { shouldShowDialog = false },
confirmButton = { confirmButton = {
TextButton( BitwardenTextButton(
label = stringResource(id = R.string.ok),
onClick = { onClick = {
onDateSelect( onDateSelect(
ZonedDateTime ZonedDateTime
@ -128,31 +123,55 @@ fun BitwardenDateSelectButton(
) )
shouldShowDialog = false shouldShowDialog = false
}, },
modifier = Modifier.testTag("AcceptAlertButton"), modifier = Modifier.testTag(tag = "AcceptAlertButton"),
) {
Text(
text = stringResource(id = R.string.ok),
style = BitwardenTheme.typography.labelLarge,
) )
}
}, },
dismissButton = { dismissButton = {
TextButton( BitwardenTextButton(
label = stringResource(id = R.string.cancel),
onClick = { shouldShowDialog = false }, onClick = { shouldShowDialog = false },
modifier = Modifier.testTag("DismissAlertButton"), modifier = Modifier.testTag(tag = "DismissAlertButton"),
) {
Text(
text = stringResource(id = R.string.cancel),
style = BitwardenTheme.typography.labelLarge,
) )
}
}, },
modifier = Modifier.semantics { modifier = Modifier.semantics {
testTagsAsResourceId = true testTagsAsResourceId = true
testTag = "AlertPopup" 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.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
@ -52,7 +51,8 @@ fun BitwardenLoadingDialog(
Card( Card(
shape = RoundedCornerShape(28.dp), shape = RoundedCornerShape(28.dp),
colors = CardDefaults.cardColors( colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surfaceContainerHigh, containerColor = BitwardenTheme.colorScheme.background.primary,
contentColor = BitwardenTheme.colorScheme.text.primary,
), ),
modifier = Modifier modifier = Modifier
.semantics { .semantics {

View file

@ -5,7 +5,6 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.layout.imePadding
import androidx.compose.material3.AlertDialog import androidx.compose.material3.AlertDialog
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue 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 { modifier = Modifier.semantics {
testTagsAsResourceId = true testTagsAsResourceId = true
testTag = "AlertPopup" 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.foundation.layout.imePadding
import androidx.compose.material3.AlertDialog import androidx.compose.material3.AlertDialog
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
@ -70,7 +69,10 @@ fun BitwardenPinDialog(
autoFocus = true, 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 { modifier = Modifier.semantics {
testTagsAsResourceId = true testTagsAsResourceId = true
testTag = "AlertPopup" testTag = "AlertPopup"

View file

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

View file

@ -1,7 +1,6 @@
package com.x8bit.bitwarden.ui.platform.components.dialog package com.x8bit.bitwarden.ui.platform.components.dialog
import androidx.compose.material3.AlertDialog import androidx.compose.material3.AlertDialog
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect 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 { modifier = Modifier.semantics {
testTagsAsResourceId = true testTagsAsResourceId = true
testTag = "AlertPopup" testTag = "AlertPopup"

View file

@ -1,6 +1,5 @@
package com.x8bit.bitwarden.ui.platform.components.dialog package com.x8bit.bitwarden.ui.platform.components.dialog
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.IntrinsicSize
@ -14,9 +13,9 @@ import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface import androidx.compose.material3.Surface
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TimeInput import androidx.compose.material3.TimeInput
import androidx.compose.material3.TimePicker import androidx.compose.material3.TimePicker
import androidx.compose.material3.TimePickerColors
import androidx.compose.material3.rememberTimePickerState import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
@ -36,6 +35,7 @@ import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties import androidx.compose.ui.window.DialogProperties
import com.x8bit.bitwarden.R import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenStandardIconButton 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 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
@ -67,26 +67,18 @@ fun BitwardenTimePickerDialog(
TimePickerDialog( TimePickerDialog(
onDismissRequest = onDismissRequest, onDismissRequest = onDismissRequest,
confirmButton = { confirmButton = {
TextButton( BitwardenTextButton(
modifier = Modifier.testTag(tag = "AcceptAlertButton"),
label = stringResource(id = R.string.ok),
onClick = { onTimeSelect(timePickerState.hour, timePickerState.minute) }, onClick = { onTimeSelect(timePickerState.hour, timePickerState.minute) },
) {
Text(
text = stringResource(id = R.string.ok),
style = BitwardenTheme.typography.labelLarge,
modifier = Modifier.testTag("AcceptAlertButton"),
) )
}
}, },
dismissButton = { dismissButton = {
TextButton( BitwardenTextButton(
modifier = Modifier.testTag(tag = "DismissAlertButton"),
label = stringResource(id = R.string.cancel),
onClick = onDismissRequest, onClick = onDismissRequest,
modifier = Modifier.testTag("DismissAlertButton"),
) {
Text(
text = stringResource(id = R.string.cancel),
style = BitwardenTheme.typography.labelLarge,
) )
}
}, },
inputToggleButton = { inputToggleButton = {
BitwardenStandardIconButton( BitwardenStandardIconButton(
@ -96,7 +88,6 @@ fun BitwardenTimePickerDialog(
id = androidx.compose.material3.R.string.m3c_date_picker_switch_to_input_mode, id = androidx.compose.material3.R.string.m3c_date_picker_switch_to_input_mode,
), ),
onClick = { showTimeInput = !showTimeInput }, onClick = { showTimeInput = !showTimeInput },
contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
) )
}, },
) { ) {
@ -104,17 +95,41 @@ fun BitwardenTimePickerDialog(
if (showTimeInput) { if (showTimeInput) {
TimeInput( TimeInput(
state = timePickerState, state = timePickerState,
colors = bitwardenTimePickerColors(),
modifier = modifier, modifier = modifier,
) )
} else { } else {
TimePicker( TimePicker(
state = timePickerState, state = timePickerState,
colors = bitwardenTimePickerColors(),
modifier = modifier, 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) @OptIn(ExperimentalComposeUiApi::class)
@Composable @Composable
private fun TimePickerDialog( private fun TimePickerDialog(
@ -130,18 +145,15 @@ private fun TimePickerDialog(
) { ) {
Surface( Surface(
shape = MaterialTheme.shapes.extraLarge, shape = MaterialTheme.shapes.extraLarge,
tonalElevation = 6.dp, color = BitwardenTheme.colorScheme.background.primary,
contentColor = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier modifier = Modifier
.semantics { .semantics {
testTagsAsResourceId = true testTagsAsResourceId = true
testTag = "AlertPopup" testTag = "AlertPopup"
} }
.width(IntrinsicSize.Min) .width(IntrinsicSize.Min)
.height(IntrinsicSize.Min) .height(IntrinsicSize.Min),
.background(
shape = MaterialTheme.shapes.extraLarge,
color = MaterialTheme.colorScheme.surface,
),
) { ) {
Column( Column(
modifier = Modifier.padding(24.dp), modifier = Modifier.padding(24.dp),
@ -154,6 +166,7 @@ private fun TimePickerDialog(
.padding(bottom = 20.dp), .padding(bottom = 20.dp),
// TODO: This should be "Select time" but we don't have that string (BIT-1405) // TODO: This should be "Select time" but we don't have that string (BIT-1405)
text = stringResource(id = R.string.time), text = stringResource(id = R.string.time),
color = BitwardenTheme.colorScheme.text.secondary,
style = BitwardenTheme.typography.labelMedium, 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.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue 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.contentDescription
import androidx.compose.ui.semantics.role import androidx.compose.ui.semantics.role
import com.x8bit.bitwarden.R 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.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import com.x8bit.bitwarden.ui.platform.util.orNow import com.x8bit.bitwarden.ui.platform.util.orNow
@ -80,18 +79,10 @@ fun BitwardenTimeSelectButton(
Icon( Icon(
painter = rememberVectorPainter(id = R.drawable.ic_region_select_dropdown), painter = rememberVectorPainter(id = R.drawable.ic_region_select_dropdown),
contentDescription = null, contentDescription = null,
tint = MaterialTheme.colorScheme.onSurfaceVariant, tint = BitwardenTheme.colorScheme.icon.primary,
) )
}, },
colors = OutlinedTextFieldDefaults.colors( colors = bitwardenTextFieldButtonColors(),
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,
),
) )
if (shouldShowDialog) { 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.background
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow 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.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment 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.Dialog
import androidx.compose.ui.window.DialogProperties import androidx.compose.ui.window.DialogProperties
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton 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.maxDialogHeight
import com.x8bit.bitwarden.ui.platform.components.util.maxDialogWidth import com.x8bit.bitwarden.ui.platform.components.util.maxDialogWidth
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -60,8 +59,8 @@ fun BitwardenTwoButtonDialog(
onConfirmClick: () -> Unit, onConfirmClick: () -> Unit,
onDismissClick: () -> Unit, onDismissClick: () -> Unit,
onDismissRequest: () -> Unit, onDismissRequest: () -> Unit,
confirmTextColor: Color? = null, confirmTextColor: Color = BitwardenTheme.colorScheme.outlineButton.foreground,
dismissTextColor: Color? = null, dismissTextColor: Color = BitwardenTheme.colorScheme.outlineButton.foreground,
) { ) {
Dialog( Dialog(
onDismissRequest = onDismissRequest, onDismissRequest = onDismissRequest,
@ -83,7 +82,7 @@ fun BitwardenTwoButtonDialog(
) )
// This background is necessary for the dialog to not be transparent. // This background is necessary for the dialog to not be transparent.
.background( .background(
color = MaterialTheme.colorScheme.surfaceContainerHigh, color = BitwardenTheme.colorScheme.background.primary,
shape = RoundedCornerShape(28.dp), shape = RoundedCornerShape(28.dp),
), ),
horizontalAlignment = Alignment.End, horizontalAlignment = Alignment.End,
@ -96,18 +95,13 @@ fun BitwardenTwoButtonDialog(
.padding(horizontal = 24.dp) .padding(horizontal = 24.dp)
.fillMaxWidth(), .fillMaxWidth(),
text = title, text = title,
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
style = BitwardenTheme.typography.headlineSmall, style = BitwardenTheme.typography.headlineSmall,
) )
Spacer(modifier = Modifier.height(16.dp)) Spacer(modifier = Modifier.height(16.dp))
} }
if (scrollState.canScrollBackward) { if (scrollState.canScrollBackward) {
Box( BitwardenHorizontalDivider()
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(MaterialTheme.colorScheme.outlineVariant),
)
} }
Text( Text(
modifier = Modifier modifier = Modifier
@ -117,16 +111,11 @@ fun BitwardenTwoButtonDialog(
.padding(horizontal = 24.dp) .padding(horizontal = 24.dp)
.fillMaxWidth(), .fillMaxWidth(),
text = message, text = message,
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
) )
if (scrollState.canScrollForward) { if (scrollState.canScrollForward) {
Box( BitwardenHorizontalDivider()
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(MaterialTheme.colorScheme.outlineVariant),
)
} }
Spacer(modifier = Modifier.height(12.dp)) Spacer(modifier = Modifier.height(12.dp))
FlowRow( FlowRow(

View file

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

View file

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

View file

@ -1,12 +1,12 @@
package com.x8bit.bitwarden.ui.platform.components.divider package com.x8bit.bitwarden.ui.platform.components.divider
import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
* A divider line. * A divider line.
@ -20,7 +20,7 @@ import androidx.compose.ui.unit.dp
fun BitwardenHorizontalDivider( fun BitwardenHorizontalDivider(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
thickness: Dp = 1.dp, thickness: Dp = 1.dp,
color: Color = MaterialTheme.colorScheme.outlineVariant, color: Color = BitwardenTheme.colorScheme.stroke.divider,
) { ) {
HorizontalDivider( HorizontalDivider(
modifier = modifier, 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.size
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf 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.button.BitwardenStandardIconButton
import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenSelectionDialog 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.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.model.TooltipData
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -91,7 +91,9 @@ fun BitwardenMultiSelectButton(
} }
.fillMaxWidth() .fillMaxWidth()
.clickable( .clickable(
indication = null, indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
enabled = isEnabled, enabled = isEnabled,
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
) { ) {
@ -113,7 +115,7 @@ fun BitwardenMultiSelectButton(
contentDescription = it.contentDescription, contentDescription = it.contentDescription,
onClick = it.onClick, onClick = it.onClick,
isEnabled = isEnabled, isEnabled = isEnabled,
contentColor = MaterialTheme.colorScheme.primary, contentColor = BitwardenTheme.colorScheme.icon.secondary,
modifier = Modifier.size(16.dp), modifier = Modifier.size(16.dp),
) )
} }
@ -126,18 +128,10 @@ fun BitwardenMultiSelectButton(
Icon( Icon(
painter = rememberVectorPainter(id = R.drawable.ic_region_select_dropdown), painter = rememberVectorPainter(id = R.drawable.ic_region_select_dropdown),
contentDescription = null, contentDescription = null,
tint = MaterialTheme.colorScheme.onSurfaceVariant, tint = BitwardenTheme.colorScheme.icon.primary,
) )
}, },
colors = OutlinedTextFieldDefaults.colors( colors = bitwardenTextFieldButtonColors(),
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,
),
supportingText = supportingText?.let { supportingText = supportingText?.let {
{ {
Text( Text(

View file

@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.ripple import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -60,7 +59,7 @@ fun EnvironmentSelector(
.clickable( .clickable(
indication = ripple( indication = ripple(
bounded = true, bounded = true,
color = MaterialTheme.colorScheme.primary, color = BitwardenTheme.colorScheme.background.pressed,
), ),
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
onClick = { shouldShowDialog = !shouldShowDialog }, onClick = { shouldShowDialog = !shouldShowDialog },
@ -74,19 +73,19 @@ fun EnvironmentSelector(
Text( Text(
text = labelText, text = labelText,
style = BitwardenTheme.typography.bodySmall, style = BitwardenTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.padding(end = 12.dp), modifier = Modifier.padding(end = 12.dp),
) )
Text( Text(
text = selectedOption.displayLabel(), text = selectedOption.displayLabel(),
style = BitwardenTheme.typography.labelLarge, style = BitwardenTheme.typography.labelLarge,
color = MaterialTheme.colorScheme.primary, color = BitwardenTheme.colorScheme.text.interaction,
modifier = Modifier.padding(end = 8.dp), modifier = Modifier.padding(end = 8.dp),
) )
Icon( Icon(
painter = rememberVectorPainter(id = R.drawable.ic_region_select_dropdown), painter = rememberVectorPainter(id = R.drawable.ic_region_select_dropdown),
contentDescription = stringResource(id = R.string.region), 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.FloatingActionButton
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter import androidx.compose.ui.graphics.painter.Painter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
* Represents a Bitwarden-styled [FloatingActionButton]. * Represents a Bitwarden-styled [FloatingActionButton].
@ -23,14 +23,14 @@ fun BitwardenFloatingActionButton(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
FloatingActionButton( FloatingActionButton(
containerColor = MaterialTheme.colorScheme.primaryContainer, containerColor = BitwardenTheme.colorScheme.filledButton.background,
contentColor = BitwardenTheme.colorScheme.filledButton.foreground,
onClick = onClick, onClick = onClick,
modifier = modifier, modifier = modifier,
) { ) {
Icon( Icon(
painter = painter, painter = painter,
contentDescription = contentDescription, contentDescription = contentDescription,
tint = MaterialTheme.colorScheme.onPrimaryContainer,
) )
} }
} }

View file

@ -1,15 +1,14 @@
package com.x8bit.bitwarden.ui.platform.components.field package com.x8bit.bitwarden.ui.platform.components.field
import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview 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 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
@ -36,15 +35,7 @@ fun BitwardenHiddenPasswordField(
enabled = false, enabled = false,
readOnly = true, readOnly = true,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password), keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
colors = OutlinedTextFieldDefaults.colors( colors = bitwardenTextFieldColors(),
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,
),
) )
} }

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.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable 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.R
import com.x8bit.bitwarden.ui.platform.base.util.tabNavigation 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.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.components.util.nonLetterColorVisualTransformation
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -74,6 +74,7 @@ fun BitwardenPasswordField(
modifier = modifier modifier = modifier
.tabNavigation() .tabNavigation()
.focusRequester(focusRequester), .focusRequester(focusRequester),
colors = bitwardenTextFieldColors(),
textStyle = BitwardenTheme.typography.sensitiveInfoSmall, textStyle = BitwardenTheme.typography.sensitiveInfoSmall,
label = { Text(text = label) }, label = { Text(text = label) },
value = value, value = value,
@ -110,7 +111,6 @@ fun BitwardenPasswordField(
id = if (showPassword) R.string.hide else R.string.show, id = if (showPassword) R.string.hide else R.string.show,
), ),
onClick = { showPasswordChange.invoke(!showPassword) }, 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.foundation.text.KeyboardOptions
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -22,6 +21,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.base.util.toPx import com.x8bit.bitwarden.ui.platform.base.util.toPx
import com.x8bit.bitwarden.ui.platform.base.util.withLineBreaksAtWidth 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.components.model.IconResource
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -80,6 +80,7 @@ fun BitwardenTextField(
} }
OutlinedTextField( OutlinedTextField(
colors = bitwardenTextFieldColors(),
modifier = modifier modifier = modifier
.onGloballyPositioned { widthPx = it.size.width } .onGloballyPositioned { widthPx = it.size.width }
.focusRequester(focusRequester), .focusRequester(focusRequester),
@ -91,15 +92,18 @@ fun BitwardenTextField(
Icon( Icon(
painter = iconResource.iconPainter, painter = iconResource.iconPainter,
contentDescription = iconResource.contentDescription, contentDescription = iconResource.contentDescription,
tint = MaterialTheme.colorScheme.onSurfaceVariant, tint = BitwardenTheme.colorScheme.icon.primary,
) )
} }
}, },
trailingIcon = trailingIconContent?.let { trailingIcon = trailingIconContent,
trailingIconContent
},
placeholder = placeholder?.let { placeholder = placeholder?.let {
{ Text(text = it) } {
Text(
text = it,
color = BitwardenTheme.colorScheme.text.primary,
)
}
}, },
supportingText = hint?.let { 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 package com.x8bit.bitwarden.ui.platform.components.header
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
@ -23,7 +22,7 @@ fun BitwardenListHeaderText(
Text( Text(
text = label, text = label,
style = BitwardenTheme.typography.labelMedium, style = BitwardenTheme.typography.labelMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.secondary,
modifier = modifier.padding( modifier = modifier.padding(
top = 12.dp, top = 12.dp,
bottom = 4.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.Arrangement
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
@ -38,13 +37,13 @@ fun BitwardenListHeaderTextWithSupportLabel(
Text( Text(
text = label, text = label,
style = BitwardenTheme.typography.labelMedium, style = BitwardenTheme.typography.labelMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.secondary,
) )
Text( Text(
text = supportingLabel, text = supportingLabel,
style = BitwardenTheme.typography.labelSmall, 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.Box
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -46,7 +46,8 @@ fun BitwardenCircularCountdownIndicator(
CircularProgressIndicator( CircularProgressIndicator(
progress = { progressAnimate }, progress = { progressAnimate },
modifier = Modifier.size(size = 30.dp), modifier = Modifier.size(size = 30.dp),
color = MaterialTheme.colorScheme.primary, color = BitwardenTheme.colorScheme.icon.secondary,
trackColor = Color.Transparent,
strokeWidth = 3.dp, strokeWidth = 3.dp,
strokeCap = StrokeCap.Round, strokeCap = StrokeCap.Round,
) )
@ -54,7 +55,7 @@ fun BitwardenCircularCountdownIndicator(
Text( Text(
text = timeLeftSeconds.toString(), text = timeLeftSeconds.toString(),
style = BitwardenTheme.typography.bodySmall, 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.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
* A Bitwarden-styled [CircularProgressIndicator]. * A Bitwarden-styled [CircularProgressIndicator].
@ -11,5 +12,8 @@ import androidx.compose.ui.Modifier
fun BitwardenCircularProgressIndicator( fun BitwardenCircularProgressIndicator(
modifier: Modifier = Modifier, 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.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.ripple import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -51,7 +50,9 @@ fun BitwardenGroupItem(
modifier = Modifier modifier = Modifier
.clickable( .clickable(
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary), indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = onClick, onClick = onClick,
) )
.bottomDivider( .bottomDivider(
@ -70,7 +71,7 @@ fun BitwardenGroupItem(
Icon( Icon(
painter = startIcon, painter = startIcon,
contentDescription = null, contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface, tint = BitwardenTheme.colorScheme.icon.primary,
modifier = Modifier modifier = Modifier
.semantics { startIconTestTag?.let { testTag = it } } .semantics { startIconTestTag?.let { testTag = it } }
.size(24.dp), .size(24.dp),
@ -79,20 +80,20 @@ fun BitwardenGroupItem(
Text( Text(
text = label, text = label,
style = BitwardenTheme.typography.bodyLarge, style = BitwardenTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
) )
Text( Text(
text = supportingLabel, text = supportingLabel,
style = BitwardenTheme.typography.labelSmall, style = BitwardenTheme.typography.labelSmall,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.primary,
) )
Icon( Icon(
painter = rememberVectorPainter(id = R.drawable.ic_navigate_next), painter = rememberVectorPainter(id = R.drawable.ic_navigate_next),
contentDescription = null, contentDescription = null,
tint = MaterialTheme.colorScheme.onSurfaceVariant, tint = BitwardenTheme.colorScheme.icon.primary,
modifier = Modifier modifier = Modifier
.mirrorIfRtl() .mirrorIfRtl()
.size(24.dp), .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.size
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.ripple import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -82,7 +81,9 @@ fun BitwardenListItem(
modifier = Modifier modifier = Modifier
.clickable( .clickable(
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary), indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = onClick, onClick = onClick,
) )
.defaultMinSize(minHeight = 72.dp) .defaultMinSize(minHeight = 72.dp)
@ -94,7 +95,7 @@ fun BitwardenListItem(
BitwardenIcon( BitwardenIcon(
iconData = startIcon, iconData = startIcon,
contentDescription = null, contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface, tint = BitwardenTheme.colorScheme.icon.primary,
modifier = Modifier modifier = Modifier
.semantics { startIconTestTag?.let { testTag = it } } .semantics { startIconTestTag?.let { testTag = it } }
.size(24.dp), .size(24.dp),
@ -107,7 +108,7 @@ fun BitwardenListItem(
Text( Text(
text = label, text = label,
style = BitwardenTheme.typography.bodyLarge, style = BitwardenTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
maxLines = 1, maxLines = 1,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
modifier = Modifier modifier = Modifier
@ -120,7 +121,7 @@ fun BitwardenListItem(
Icon( Icon(
painter = iconResource.iconPainter, painter = iconResource.iconPainter,
contentDescription = iconResource.contentDescription, contentDescription = iconResource.contentDescription,
tint = MaterialTheme.colorScheme.secondary, tint = BitwardenTheme.colorScheme.icon.primary,
modifier = Modifier modifier = Modifier
.semantics { iconResource.testTag?.let { testTag = it } } .semantics { iconResource.testTag?.let { testTag = it } }
.size(16.dp), .size(16.dp),
@ -132,7 +133,7 @@ fun BitwardenListItem(
Text( Text(
text = secondSupportLabel, text = secondSupportLabel,
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.secondary,
modifier = Modifier.semantics { modifier = Modifier.semantics {
secondSupportingLabelTestTag?.let { testTag = it } secondSupportingLabelTestTag?.let { testTag = it }
}, },
@ -143,7 +144,7 @@ fun BitwardenListItem(
Text( Text(
text = supportLabel, text = supportLabel,
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.secondary,
modifier = Modifier.semantics { supportingLabelTestTag?.let { testTag = it } }, modifier = Modifier.semantics { supportingLabelTestTag?.let { testTag = it } },
) )
} }
@ -154,7 +155,6 @@ fun BitwardenListItem(
vectorIconRes = R.drawable.ic_more_horizontal, vectorIconRes = R.drawable.ic_more_horizontal,
contentDescription = stringResource(id = R.string.options), contentDescription = stringResource(id = R.string.options),
onClick = { shouldShowDialog = true }, onClick = { shouldShowDialog = true },
contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
modifier = Modifier.semantics { optionsTestTag?.let { testTag = it } }, 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.foundation.layout.RowScope
import androidx.compose.material3.BadgedBox import androidx.compose.material3.BadgedBox
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBarItem import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationBarItemDefaults
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.style.TextOverflow
import com.x8bit.bitwarden.ui.platform.components.badge.NotificationBadge 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 import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
/** /**
@ -66,13 +65,7 @@ fun RowScope.BitwardenNavigationBarItem(
}, },
selected = isSelected, selected = isSelected,
onClick = onClick, onClick = onClick,
colors = NavigationBarItemDefaults.colors( colors = bitwardenNavigationBarItemColors(),
indicatorColor = MaterialTheme.colorScheme.secondaryContainer,
selectedIconColor = MaterialTheme.colorScheme.onSecondaryContainer,
unselectedIconColor = MaterialTheme.colorScheme.onSurface,
selectedTextColor = MaterialTheme.colorScheme.onSecondaryContainer,
unselectedTextColor = MaterialTheme.colorScheme.onSurface,
),
modifier = modifier, 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 package com.x8bit.bitwarden.ui.platform.components.radio
import androidx.compose.material3.RadioButton import androidx.compose.material3.RadioButton
import androidx.compose.material3.RadioButtonDefaults
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import com.x8bit.bitwarden.ui.platform.components.radio.color.bitwardenRadioButtonColors
/** /**
* A custom Bitwarden-themed radio button. * A custom Bitwarden-themed radio button.
@ -22,6 +22,6 @@ fun BitwardenRadioButton(
modifier = modifier, modifier = modifier,
selected = isSelected, selected = isSelected,
onClick = onClick, 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 package com.x8bit.bitwarden.ui.platform.components.row
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
@ -57,7 +56,7 @@ fun BitwardenExternalLinkRow(
modifier = Modifier.mirrorIfRtl(), modifier = Modifier.mirrorIfRtl(),
painter = rememberVectorPainter(id = R.drawable.ic_external_link), painter = rememberVectorPainter(id = R.drawable.ic_external_link),
contentDescription = null, 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.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.ripple import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -51,7 +50,9 @@ fun BitwardenTextRow(
.clickable( .clickable(
enabled = isEnabled, enabled = isEnabled,
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary), indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = onClick, onClick = onClick,
) )
.semantics(mergeDescendants = true) { }, .semantics(mergeDescendants = true) { },
@ -72,17 +73,21 @@ fun BitwardenTextRow(
Text( Text(
text = text, text = text,
style = BitwardenTheme.typography.bodyLarge, style = BitwardenTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurface.copy( color = if (isEnabled) {
alpha = if (isEnabled) 1.0f else 0.38f, BitwardenTheme.colorScheme.text.primary
), } else {
BitwardenTheme.colorScheme.filledButton.foregroundDisabled
},
) )
description?.let { description?.let {
Text( Text(
text = it, text = it,
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant.copy( color = if (isEnabled) {
alpha = if (isEnabled) 1.0f else 0.38f, 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.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FabPosition import androidx.compose.material3.FabPosition
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold import androidx.compose.material3.Scaffold
import androidx.compose.material3.ScaffoldDefaults import androidx.compose.material3.ScaffoldDefaults
import androidx.compose.material3.contentColorFor
import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults
import androidx.compose.material3.pulltorefresh.pullToRefresh import androidx.compose.material3.pulltorefresh.pullToRefresh
import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState 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.graphics.Color
import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTagsAsResourceId 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 * Direct passthrough to [Scaffold] but contains a few specific override values. Everything is
@ -39,8 +38,8 @@ fun BitwardenScaffold(
floatingActionButton: @Composable () -> Unit = { }, floatingActionButton: @Composable () -> Unit = { },
floatingActionButtonPosition: FabPosition = FabPosition.End, floatingActionButtonPosition: FabPosition = FabPosition.End,
pullToRefreshState: BitwardenPullToRefreshState = rememberBitwardenPullToRefreshState(), pullToRefreshState: BitwardenPullToRefreshState = rememberBitwardenPullToRefreshState(),
containerColor: Color = MaterialTheme.colorScheme.surface, containerColor: Color = BitwardenTheme.colorScheme.background.primary,
contentColor: Color = contentColorFor(containerColor), contentColor: Color = BitwardenTheme.colorScheme.text.primary,
contentWindowInsets: WindowInsets = ScaffoldDefaults contentWindowInsets: WindowInsets = ScaffoldDefaults
.contentWindowInsets .contentWindowInsets
.exclude(WindowInsets.navigationBars), .exclude(WindowInsets.navigationBars),
@ -80,6 +79,8 @@ fun BitwardenScaffold(
.align(Alignment.TopCenter), .align(Alignment.TopCenter),
isRefreshing = pullToRefreshState.isRefreshing, isRefreshing = pullToRefreshState.isRefreshing,
state = internalPullToRefreshState, 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.Composable
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier 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. * A scrim that animates its visibility.
@ -33,7 +33,7 @@ fun BitwardenAnimatedScrim(
) { ) {
Box( Box(
modifier = modifier modifier = modifier
.background(Color.Black.copy(alpha = 0.40f)) .background(BitwardenTheme.colorScheme.background.scrim)
.clickable( .clickable(
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
// Clear the ripple // Clear the ripple

View file

@ -8,6 +8,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTag import androidx.compose.ui.semantics.testTag
import com.x8bit.bitwarden.ui.platform.components.segment.color.bitwardenSegmentedButtonColors
import kotlinx.collections.immutable.ImmutableList import kotlinx.collections.immutable.ImmutableList
/** /**
@ -28,6 +29,7 @@ fun BitwardenSegmentedButton(
SegmentedButton( SegmentedButton(
selected = option.isChecked, selected = option.isChecked,
onClick = option.onClick, onClick = option.onClick,
colors = bitwardenSegmentedButtonColors(),
shape = SegmentedButtonDefaults.itemShape( shape = SegmentedButtonDefaults.itemShape(
index = index, index = index,
count = options.size, 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.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusProperties 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.key import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onPreviewKeyEvent import androidx.compose.ui.input.key.onPreviewKeyEvent
@ -38,6 +37,8 @@ import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.toDp 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 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
@ -89,6 +90,7 @@ fun BitwardenSlider(
}, },
singleLine = true, singleLine = true,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number), keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
colors = bitwardenTextFieldColors(),
modifier = Modifier modifier = Modifier
.onPreviewKeyEvent { keyEvent -> .onPreviewKeyEvent { keyEvent ->
when (keyEvent.key) { when (keyEvent.key) {
@ -111,23 +113,17 @@ fun BitwardenSlider(
.width(width = 16.dp + labelTextWidth + 16.dp), .width(width = 16.dp + labelTextWidth + 16.dp),
) )
val colors = SliderDefaults.colors(
activeTickColor = Color.Transparent,
inactiveTickColor = Color.Transparent,
disabledActiveTickColor = Color.Transparent,
disabledInactiveTickColor = Color.Transparent,
)
Slider( Slider(
value = sliderValue.toFloat(), value = sliderValue.toFloat(),
onValueChange = { newValue -> onValueChange(newValue.toInt(), true) }, onValueChange = { newValue -> onValueChange(newValue.toInt(), true) },
onValueChangeFinished = { onValueChange(sliderValue, false) }, onValueChangeFinished = { onValueChange(sliderValue, false) },
valueRange = range.start.toFloat()..range.endInclusive.toFloat(), valueRange = range.start.toFloat()..range.endInclusive.toFloat(),
steps = range.endInclusive - 1, steps = range.endInclusive - 1,
colors = colors, colors = bitwardenSliderColors(),
thumb = { thumb = {
SliderDefaults.Thumb( SliderDefaults.Thumb(
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
colors = colors, colors = bitwardenSliderColors(),
thumbSize = DpSize(width = 20.dp, height = 20.dp), thumbSize = DpSize(width = 20.dp, height = 20.dp),
) )
}, },
@ -135,7 +131,7 @@ fun BitwardenSlider(
SliderDefaults.Track( SliderDefaults.Track(
modifier = Modifier.height(height = 4.dp), modifier = Modifier.height(height = 4.dp),
drawStopIndicator = null, drawStopIndicator = null,
colors = colors, colors = bitwardenSliderColors(),
sliderState = sliderState, sliderState = sliderState,
thumbTrackGapSize = 0.dp, 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.PaddingValues
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.ripple import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable 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 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.components.button.BitwardenTextButton
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
* Represents a Bitwarden-styled clickable text. * Represents a Bitwarden-styled clickable text.
@ -35,7 +35,7 @@ fun BitwardenClickableText(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
innerPadding: PaddingValues = PaddingValues(vertical = 4.dp, horizontal = 16.dp), innerPadding: PaddingValues = PaddingValues(vertical = 4.dp, horizontal = 16.dp),
cornerSize: Dp = 28.dp, cornerSize: Dp = 28.dp,
color: Color = MaterialTheme.colorScheme.primary, color: Color = BitwardenTheme.colorScheme.text.interaction,
) { ) {
Text( Text(
modifier = modifier modifier = modifier
@ -43,7 +43,7 @@ fun BitwardenClickableText(
.clickable( .clickable(
indication = ripple( indication = ripple(
bounded = true, bounded = true,
color = MaterialTheme.colorScheme.primary, color = BitwardenTheme.colorScheme.background.pressed,
), ),
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
onClick = onClick, onClick = onClick,

View file

@ -1,9 +1,8 @@
package com.x8bit.bitwarden.ui.platform.components.text 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.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
@ -32,14 +31,13 @@ fun BitwardenPolicyWarningText(
text = text, text = text,
textAlign = textAlign, textAlign = textAlign,
style = style, style = style,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = BitwardenTheme.colorScheme.text.primary,
modifier = modifier modifier = modifier
.border( .background(
width = 1.dp, color = BitwardenTheme.colorScheme.background.tertiary,
color = MaterialTheme.colorScheme.primary, shape = RoundedCornerShape(size = 8.dp),
shape = RoundedCornerShape(4.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.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch import androidx.compose.material3.Switch
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.ripple 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.state.ToggleableState
import androidx.compose.ui.tooling.preview.Preview 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.toggle.color.bitwardenSwitchColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
@ -50,7 +50,9 @@ fun BitwardenSwitch(
if (onCheckedChange != null) { if (onCheckedChange != null) {
this.clickable( this.clickable(
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary), indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = { onCheckedChange.invoke(!isChecked) }, onClick = { onCheckedChange.invoke(!isChecked) },
) )
} else { } else {
@ -69,6 +71,7 @@ fun BitwardenSwitch(
.width(52.dp), .width(52.dp),
checked = isChecked, checked = isChecked,
onCheckedChange = null, onCheckedChange = null,
colors = bitwardenSwitchColors(),
) )
Spacer(modifier = Modifier.width(16.dp)) Spacer(modifier = Modifier.width(16.dp))
@ -79,14 +82,14 @@ fun BitwardenSwitch(
Text( Text(
text = label, text = label,
style = BitwardenTheme.typography.bodyLarge, style = BitwardenTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurface, color = BitwardenTheme.colorScheme.text.primary,
) )
description?.let { description?.let {
Text( Text(
text = it, text = it,
style = BitwardenTheme.typography.bodyMedium, 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.Arrangement
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.RowScope
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch import androidx.compose.material3.Switch
import androidx.compose.material3.ripple import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -47,7 +46,9 @@ fun BitwardenSwitchWithActions(
modifier = Modifier modifier = Modifier
.clickable( .clickable(
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary), indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = { onCheckedChange?.invoke(!isChecked) }, onClick = { onCheckedChange?.invoke(!isChecked) },
) )
.semantics(mergeDescendants = true) { .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.padding
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch import androidx.compose.material3.Switch
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.ripple 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.state.ToggleableState
import androidx.compose.ui.tooling.preview.Preview 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.toggle.color.bitwardenSwitchColors
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
@ -57,7 +57,9 @@ fun BitwardenWideSwitch(
.wrapContentHeight() .wrapContentHeight()
.clickable( .clickable(
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
indication = ripple(color = MaterialTheme.colorScheme.primary), indication = ripple(
color = BitwardenTheme.colorScheme.background.pressed,
),
onClick = { onCheckedChange?.invoke(!isChecked) }, onClick = { onCheckedChange?.invoke(!isChecked) },
enabled = !readOnly && enabled, enabled = !readOnly && enabled,
) )
@ -76,9 +78,9 @@ fun BitwardenWideSwitch(
text = label, text = label,
style = BitwardenTheme.typography.bodyLarge, style = BitwardenTheme.typography.bodyLarge,
color = if (enabled) { color = if (enabled) {
MaterialTheme.colorScheme.onSurface BitwardenTheme.colorScheme.text.primary
} else { } else {
MaterialTheme.colorScheme.outline BitwardenTheme.colorScheme.filledButton.foregroundDisabled
}, },
) )
description?.let { description?.let {
@ -86,9 +88,9 @@ fun BitwardenWideSwitch(
text = it, text = it,
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
color = if (enabled) { color = if (enabled) {
MaterialTheme.colorScheme.onSurfaceVariant BitwardenTheme.colorScheme.text.secondary
} else { } else {
MaterialTheme.colorScheme.outline BitwardenTheme.colorScheme.filledButton.foregroundDisabled
}, },
) )
} }
@ -102,6 +104,7 @@ fun BitwardenWideSwitch(
enabled = enabled, enabled = enabled,
checked = isChecked, checked = isChecked,
onCheckedChange = null, 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 package com.x8bit.bitwarden.ui.platform.components.util
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color 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.TransformedText
import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.withStyle 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 * 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 @Composable
fun nonLetterColorVisualTransformation(): VisualTransformation { fun nonLetterColorVisualTransformation(): VisualTransformation {
val digitColor = MaterialTheme.colorScheme.primary val digitColor = BitwardenTheme.colorScheme.text.codeBlue
val specialCharacterColor = MaterialTheme.colorScheme.error val specialCharacterColor = BitwardenTheme.colorScheme.text.codePink
return remember(digitColor, specialCharacterColor) { return remember(digitColor, specialCharacterColor) {
NonLetterColorVisualTransformation( NonLetterColorVisualTransformation(
digitColor = digitColor, digitColor = digitColor,

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