Skip to content

Commit f46a937

Browse files
nbradburyclaude
nbradbury
and
claude
authored
Standardize FAB colors and icon to M3 defaults (#22654)
* Standardize FAB colors to use onSurface/surface across all screens Use consistent containerColor (onSurface) and contentColor (surface) for all Compose FABs, remove dark mode conditional in CampaignListingFragment, remove explicit backgroundTint override in media_settings_activity.xml, and add CampaignListingSuccess preview with FAB. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Use M3 default FAB colors and standardize create FAB icon Remove explicit containerColor/contentColor overrides from all Compose FABs so they use the M3 defaults (primaryContainer/onPrimaryContainer). Standardize all create FABs to use Icons.Default.Add instead of mixing Icons.Rounded.Add. Clean up unused imports. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Update XML FAB theme style to use M3 primaryContainer colors Change WordPress.FloatingActionButton style in both light and dark themes to use colorPrimaryContainer/colorOnPrimaryContainer, matching the M3 defaults used by all Compose FABs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Revert XML FAB theme style to original colors The colorPrimaryContainer/colorOnPrimaryContainer attributes are not available in Theme.MaterialComponents.DayNight, causing a crash at startup. Revert to the original theme colors for XML FABs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Use brand-appropriate FAB colors per app flavor WordPress FABs now use Automattic blue tones instead of M3 default purple. Jetpack retains the purple M3 defaults via flavor overrides. Updates both XML styles and Compose color schemes so all FAB rendering paths are consistent. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 11b9d39 commit f46a937

File tree

13 files changed

+76
-21
lines changed

13 files changed

+76
-21
lines changed

‎WordPress/src/jetpack/res/values-night/colors_base.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,7 @@
99

1010
<color name="nav_bar">@color/white</color>
1111
<color name="tab_indicator">@color/white</color>
12+
13+
<color name="fab_container">#4F378B</color>
14+
<color name="fab_on_container">#EADDFF</color>
1215
</resources>

‎WordPress/src/jetpack/res/values/colors_base.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,7 @@
1919

2020
<color name="nav_bar">@color/black</color>
2121
<color name="tab_indicator">@color/black</color>
22+
23+
<color name="fab_container">#EADDFF</color>
24+
<color name="fab_on_container">#21005D</color>
2225
</resources>

‎WordPress/src/main/java/org/wordpress/android/support/logs/ui/LogDetailScreen.kt‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,6 @@ fun LogDetailScreen(
4949
floatingActionButton = {
5050
FloatingActionButton(
5151
onClick = onShareClick,
52-
containerColor = MaterialTheme.colorScheme.primaryContainer,
53-
contentColor = MaterialTheme.colorScheme.onPrimaryContainer
5452
) {
5553
Icon(
5654
painter = painterResource(R.drawable.ic_share_white_24dp),

‎WordPress/src/main/java/org/wordpress/android/ui/blaze/blazecampaigns/campaignlisting/CampaignListingFragment.kt‎

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import androidx.compose.foundation.lazy.items
1919
import androidx.compose.foundation.lazy.rememberLazyListState
2020
import androidx.compose.material.icons.Icons
2121
import androidx.compose.material.icons.automirrored.filled.ArrowBack
22-
import androidx.compose.material.icons.rounded.Add
22+
import androidx.compose.material.icons.filled.Add
2323
import androidx.compose.material3.Button
2424
import androidx.compose.material3.ExperimentalMaterial3Api
2525
import androidx.compose.material3.FloatingActionButton
@@ -54,9 +54,8 @@ import dagger.hilt.android.AndroidEntryPoint
5454
import org.wordpress.android.R
5555
import org.wordpress.android.ui.ActivityNavigator
5656
import org.wordpress.android.ui.blaze.blazecampaigns.CampaignViewModel
57-
import org.wordpress.android.ui.compose.theme.AppColor
5857
import org.wordpress.android.ui.compose.theme.AppThemeM3
59-
import org.wordpress.android.ui.compose.utils.isLightTheme
58+
import org.wordpress.android.ui.mysite.cards.blaze.CampaignStatus
6059
import org.wordpress.android.ui.compose.utils.uiStringText
6160
import org.wordpress.android.ui.main.jetpack.migration.compose.state.LoadingState
6261
import org.wordpress.android.ui.utils.UiString
@@ -275,23 +274,61 @@ fun CampaignListingError(error: CampaignListingUiState.Error) {
275274

276275
@Composable
277276
private fun CreateCampaignFloatingActionButton(modifier: Modifier = Modifier, onClick: () -> Unit) {
278-
val isInDarkMode = !isLightTheme()
279277
FloatingActionButton(
280278
modifier = modifier,
281279
onClick = onClick,
282-
containerColor = if (isInDarkMode)
283-
AppColor.Gray30
284-
else MaterialTheme.colorScheme.onSurface
285280
) {
286281
Icon(
287-
imageVector = Icons.Rounded.Add,
288-
contentDescription = stringResource(id = R.string.campaign_listing_page_create_campaign_fab_description),
289-
tint = if (isInDarkMode) MaterialTheme.colorScheme.onSurface
290-
else MaterialTheme.colorScheme.surface
282+
imageVector = Icons.Default.Add,
283+
contentDescription = stringResource(
284+
id = R.string.campaign_listing_page_create_campaign_fab_description
285+
),
291286
)
292287
}
293288
}
294289

290+
@Preview
291+
@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
292+
@Composable
293+
private fun CampaignListingSuccessPreview() {
294+
val campaigns = listOf(
295+
CampaignModel(
296+
id = "1",
297+
title = UiString.UiStringText("Summer Sale Campaign"),
298+
status = CampaignStatus.Active,
299+
featureImageUrl = null,
300+
impressions = UiString.UiStringText("10,000"),
301+
clicks = UiString.UiStringText("500"),
302+
budget = UiString.UiStringText("$50")
303+
),
304+
CampaignModel(
305+
id = "2",
306+
title = UiString.UiStringText("New Product Launch"),
307+
status = CampaignStatus.Completed,
308+
featureImageUrl = null,
309+
impressions = UiString.UiStringText("25,000"),
310+
clicks = UiString.UiStringText("1,200"),
311+
budget = UiString.UiStringText("$100")
312+
),
313+
)
314+
AppThemeM3 {
315+
Scaffold(
316+
floatingActionButton = {
317+
CreateCampaignFloatingActionButton(onClick = {})
318+
}
319+
) { contentPadding ->
320+
LazyColumn(
321+
modifier = Modifier.padding(contentPadding),
322+
contentPadding = PaddingValues(bottom = 72.dp),
323+
) {
324+
items(campaigns) { campaign ->
325+
CampaignListRow(campaignModel = campaign)
326+
}
327+
}
328+
}
329+
}
330+
}
331+
295332
@Preview
296333
@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
297334
@Composable

‎WordPress/src/main/java/org/wordpress/android/ui/compose/theme/AppColor.kt‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ object AppColor {
3636
val Gray50 = Color(0xFF646970)
3737

3838
// Blues (Automattic Color Studio)
39+
@Stable
40+
val Blue5 = Color(0xFFBBE0FA)
41+
3942
@Stable
4043
val Blue30 = Color(0xFF399CE3)
4144

@@ -45,6 +48,9 @@ object AppColor {
4548
@Stable
4649
val Blue70 = Color(0xFF044B7A)
4750

51+
@Stable
52+
val Blue80 = Color(0xFF02395C)
53+
4854
// Reds (Automattic Color Studio)
4955
@Stable
5056
val Red30 = Color(0xFFF86368)

‎WordPress/src/main/java/org/wordpress/android/ui/compose/theme/AppThemeM3.kt‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,8 @@ private val colorSchemeJPDark = darkColorScheme(
114114
private val colorSchemeWPLight = lightColorScheme(
115115
primary = AppColor.Blue50,
116116
secondary = AppColor.Blue30,
117+
primaryContainer = AppColor.Blue5,
118+
onPrimaryContainer = AppColor.Blue80,
117119
background = AppColor.White,
118120
surface = AppColor.White,
119121
error = AppColor.Red50,
@@ -127,6 +129,8 @@ private val colorSchemeWPLight = lightColorScheme(
127129
private val colorSchemeWPDark = darkColorScheme(
128130
primary = AppColor.Blue30,
129131
secondary = AppColor.Blue50,
132+
primaryContainer = AppColor.Blue70,
133+
onPrimaryContainer = AppColor.Blue5,
130134
background = AppColor.DarkGray,
131135
surface = AppColor.DarkGray,
132136
error = AppColor.Red30,

‎WordPress/src/main/java/org/wordpress/android/ui/navmenus/NavMenusActivity.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -296,7 +296,7 @@ class NavMenusActivity : BaseAppCompatActivity() {
296296
when (currentRoute) {
297297
NavMenuScreen.MenuList.name -> {
298298
FloatingActionButton(
299-
onClick = { viewModel.navigateToCreateMenu() }
299+
onClick = { viewModel.navigateToCreateMenu() },
300300
) {
301301
Icon(
302302
Icons.Default.Add,
@@ -308,7 +308,7 @@ class NavMenusActivity : BaseAppCompatActivity() {
308308
}
309309
NavMenuScreen.MenuItemList.name -> {
310310
FloatingActionButton(
311-
onClick = { viewModel.navigateToCreateMenuItem() }
311+
onClick = { viewModel.navigateToCreateMenuItem() },
312312
) {
313313
Icon(
314314
Icons.Default.Add,

‎WordPress/src/main/java/org/wordpress/android/ui/postsrs/screens/PostRsListScreen.kt‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -192,8 +192,6 @@ fun PostRsListScreen(
192192
floatingActionButton = {
193193
FloatingActionButton(
194194
onClick = onCreatePost,
195-
containerColor = MaterialTheme.colorScheme.onSurface,
196-
contentColor = MaterialTheme.colorScheme.surface
197195
) {
198196
Icon(
199197
Icons.Default.Add,

‎WordPress/src/main/res/layout/media_settings_activity.xml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -535,7 +535,6 @@
535535
android:contentDescription="@string/fab_content_description_preview"
536536
android:src="@drawable/ic_fullscreen_white_24dp"
537537
android:visibility="gone"
538-
app:backgroundTint="?attr/colorBackgroundFloating"
539538
app:elevation="8dp"
540539
app:layout_anchor="@id/app_bar_layout"
541540
app:layout_anchorGravity="bottom|right|end"

‎WordPress/src/main/res/values-night/colors_base.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,7 @@
99

1010
<color name="nav_bar">@color/colorPrimary</color>
1111
<color name="tab_indicator">@color/colorPrimary</color>
12+
13+
<color name="fab_container">@color/blue_70</color>
14+
<color name="fab_on_container">@color/blue_5</color>
1215
</resources>

0 commit comments

Comments
 (0)
⚡