Skip to content

Commit e50f5b3

Browse files
mcararemcarare
committed
Bug 1990243 - Migrate FocusTheme to Material 3 (M3) r=android-reviewers,avirvara
Key changes include: - Updating theme and color definitions to use M3 components (`FocusTheme.kt`, `FocusColors.kt`). This involves updating color palette functions (e.g., `darkColors` to `darkColorScheme`). - Updating typography definitions to align with M3 scale (`FocusTypography.kt`). This involves replacing M2 typography styles (e.g., `body1`) with their M3 counterparts (e.g., `bodyLarge`). - Updating UI components that used the old M2 theme properties to use the new M3 properties (e.g., in `AboutFragment.kt` and `ClickableSubstringLink.kt`). Differential Revision: https://phabricator.services.mozilla.com/D265833
1 parent c1168e1 commit e50f5b3

File tree

6 files changed

+58
-105
lines changed

6 files changed

+58
-105
lines changed

‎mobile/android/focus-android/app/lint-baseline.xml‎

Lines changed: 0 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -166,72 +166,6 @@
166166
column="8"/>
167167
</issue>
168168

169-
<issue
170-
id="UsingMaterialAndMaterial3Libraries"
171-
message="Using a material import while also using the material3 library"
172-
errorLine1="import androidx.compose.material.Colors"
173-
errorLine2=" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
174-
<location
175-
file="src/main/java/org/mozilla/focus/ui/theme/FocusColors.kt"
176-
line="7"
177-
column="8"/>
178-
</issue>
179-
180-
<issue
181-
id="UsingMaterialAndMaterial3Libraries"
182-
message="Using a material import while also using the material3 library"
183-
errorLine1="import androidx.compose.material.Colors"
184-
errorLine2=" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
185-
<location
186-
file="src/main/java/org/mozilla/focus/ui/theme/FocusTheme.kt"
187-
line="8"
188-
column="8"/>
189-
</issue>
190-
191-
<issue
192-
id="UsingMaterialAndMaterial3Libraries"
193-
message="Using a material import while also using the material3 library"
194-
errorLine1="import androidx.compose.material.MaterialTheme"
195-
errorLine2=" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
196-
<location
197-
file="src/main/java/org/mozilla/focus/ui/theme/FocusTheme.kt"
198-
line="9"
199-
column="8"/>
200-
</issue>
201-
202-
<issue
203-
id="UsingMaterialAndMaterial3Libraries"
204-
message="Using a material import while also using the material3 library"
205-
errorLine1="import androidx.compose.material.darkColors"
206-
errorLine2=" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
207-
<location
208-
file="src/main/java/org/mozilla/focus/ui/theme/FocusTheme.kt"
209-
line="10"
210-
column="8"/>
211-
</issue>
212-
213-
<issue
214-
id="UsingMaterialAndMaterial3Libraries"
215-
message="Using a material import while also using the material3 library"
216-
errorLine1="import androidx.compose.material.lightColors"
217-
errorLine2=" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
218-
<location
219-
file="src/main/java/org/mozilla/focus/ui/theme/FocusTheme.kt"
220-
line="11"
221-
column="8"/>
222-
</issue>
223-
224-
<issue
225-
id="UsingMaterialAndMaterial3Libraries"
226-
message="Using a material import while also using the material3 library"
227-
errorLine1="import androidx.compose.material.Typography"
228-
errorLine2=" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
229-
<location
230-
file="src/main/java/org/mozilla/focus/ui/theme/FocusTypography.kt"
231-
line="7"
232-
column="8"/>
233-
</issue>
234-
235169
<issue
236170
id="UsingMaterialAndMaterial3Libraries"
237171
message="Using a material import while also using the material3 library"

‎mobile/android/focus-android/app/src/main/java/org/mozilla/focus/fragment/about/AboutFragment.kt‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
package org.mozilla.focus.fragment.about
66

7-
import android.os.Build
87
import android.os.Bundle
98
import androidx.compose.foundation.Image
109
import androidx.compose.foundation.clickable
@@ -163,7 +162,7 @@ class AboutFragment : BaseComposeFragment() {
163162
Text(
164163
text = aboutVersion,
165164
color = focusColors.aboutPageText,
166-
style = focusTypography.body1.copy(
165+
style = focusTypography.bodyLarge.copy(
167166
// Use LTR in all cases since the version is not translatable.
168167
textDirection = TextDirection.Ltr,
169168
),
@@ -178,7 +177,7 @@ class AboutFragment : BaseComposeFragment() {
178177
Text(
179178
text = content,
180179
color = focusColors.aboutPageText,
181-
style = focusTypography.body1,
180+
style = focusTypography.bodyLarge,
182181
modifier = Modifier
183182
.padding(10.dp),
184183
)

‎mobile/android/focus-android/app/src/main/java/org/mozilla/focus/ui/theme/FocusColors.kt‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44

55
package org.mozilla.focus.ui.theme
66

7-
import androidx.compose.material.Colors
7+
import androidx.compose.material3.ColorScheme
88
import androidx.compose.ui.graphics.Color
99

1010
/**
1111
* Custom Focus colors, other than baseline Material color theme.
1212
* Colors here should be added with consideration, only when an existing Material baseline color is not suitable.
1313
*/
1414
data class FocusColors(
15-
val material: Colors,
15+
val material: ColorScheme,
1616
val dialogActiveControls: Color,
1717
val topSiteBackground: Color,
1818
val topSiteFaviconText: Color,
@@ -34,16 +34,32 @@ data class FocusColors(
3434
val dialogTextColor: Color,
3535
) {
3636
val primary: Color get() = material.primary
37-
val primaryVariant: Color get() = material.primaryVariant
38-
val secondary: Color get() = material.secondary
39-
val secondaryVariant: Color get() = material.secondaryVariant
40-
val background: Color get() = material.background
41-
val surface: Color get() = material.surface
42-
val error: Color get() = material.error
4337
val onPrimary: Color get() = material.onPrimary
38+
val primaryContainer: Color get() = material.primaryContainer
39+
val onPrimaryContainer: Color get() = material.onPrimaryContainer
40+
val inversePrimary: Color get() = material.inversePrimary
41+
val secondary: Color get() = material.secondary
4442
val onSecondary: Color get() = material.onSecondary
43+
val secondaryContainer: Color get() = material.secondaryContainer
44+
val onSecondaryContainer: Color get() = material.onSecondaryContainer
45+
val tertiary: Color get() = material.tertiary
46+
val onTertiary: Color get() = material.onTertiary
47+
val tertiaryContainer: Color get() = material.tertiaryContainer
48+
val onTertiaryContainer: Color get() = material.onTertiaryContainer
49+
val background: Color get() = material.background
4550
val onBackground: Color get() = material.onBackground
51+
val surface: Color get() = material.surface
4652
val onSurface: Color get() = material.onSurface
53+
val surfaceVariant: Color get() = material.surfaceVariant
54+
val onSurfaceVariant: Color get() = material.onSurfaceVariant
55+
val surfaceTint: Color get() = material.surfaceTint
56+
val inverseSurface: Color get() = material.inverseSurface
57+
val inverseOnSurface: Color get() = material.inverseOnSurface
58+
val error: Color get() = material.error
4759
val onError: Color get() = material.onError
48-
val isLight: Boolean get() = material.isLight
60+
val errorContainer: Color get() = material.errorContainer
61+
val onErrorContainer: Color get() = material.onErrorContainer
62+
val outline: Color get() = material.outline
63+
val outlineVariant: Color get() = material.outlineVariant
64+
val scrim: Color get() = material.scrim
4965
}

‎mobile/android/focus-android/app/src/main/java/org/mozilla/focus/ui/theme/FocusTheme.kt‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
package org.mozilla.focus.ui.theme
66

77
import androidx.compose.foundation.isSystemInDarkTheme
8-
import androidx.compose.material.Colors
9-
import androidx.compose.material.MaterialTheme
10-
import androidx.compose.material.darkColors
11-
import androidx.compose.material.lightColors
8+
import androidx.compose.material3.ColorScheme
9+
import androidx.compose.material3.MaterialTheme
10+
import androidx.compose.material3.darkColorScheme
11+
import androidx.compose.material3.lightColorScheme
1212
import androidx.compose.runtime.Composable
1313
import androidx.compose.runtime.CompositionLocalProvider
1414
import androidx.compose.runtime.ReadOnlyComposable
@@ -41,15 +41,15 @@ fun FocusTheme(
4141
tabletDimensions()
4242
}
4343

44-
val colors = if (darkTheme) {
44+
val colorScheme = if (darkTheme) {
4545
darkColorPalette()
4646
} else {
4747
lightColorPalette()
4848
}
4949

50-
CompositionLocalProvider(localColors provides colors, localDimensions provides dimensions) {
50+
CompositionLocalProvider(localColors provides colorScheme, localDimensions provides dimensions) {
5151
MaterialTheme(
52-
colors = colors.material,
52+
colorScheme = colorScheme.material,
5353
typography = focusTypography.materialTypography,
5454
content = content,
5555
)
@@ -67,7 +67,7 @@ val focusDimensions: FocusDimensions
6767
get() = localDimensions.current
6868

6969
private fun darkColorPalette(): FocusColors = FocusColors(
70-
material = darkColorsMaterial(),
70+
material = darkColorSchemeMaterial(),
7171
dialogActiveControls = PhotonColors.Pink40,
7272
topSiteBackground = PhotonColors.Ink05,
7373
topSiteFaviconText = PhotonColors.LightGrey05,
@@ -90,7 +90,7 @@ private fun darkColorPalette(): FocusColors = FocusColors(
9090
)
9191

9292
private fun lightColorPalette(): FocusColors = FocusColors(
93-
material = lightColorsMaterial(),
93+
material = lightColorSchemeMaterial(),
9494
dialogActiveControls = PhotonColors.Pink70,
9595
topSiteBackground = PhotonColors.White,
9696
topSiteFaviconText = PhotonColors.Ink50,
@@ -115,21 +115,22 @@ private fun lightColorPalette(): FocusColors = FocusColors(
115115
/**
116116
* Material baseline colors can be overridden here.
117117
*/
118-
private fun darkColorsMaterial(): Colors = darkColors(
118+
private fun darkColorSchemeMaterial(): ColorScheme = darkColorScheme(
119119
secondary = PhotonColors.Ink05,
120120
surface = PhotonColors.Ink60,
121121
onSurface = PhotonColors.LightGrey05,
122122
onBackground = PhotonColors.LightGrey05,
123123
onPrimary = PhotonColors.LightGrey05,
124124
)
125125

126-
private fun lightColorsMaterial(): Colors = lightColors(
126+
private fun lightColorSchemeMaterial(): ColorScheme = lightColorScheme(
127127
secondary = PhotonColors.LightGrey05,
128128
surface = PhotonColors.Violet05,
129129
onSurface = PhotonColors.Ink50,
130130
onBackground = PhotonColors.Ink50,
131131
onPrimary = PhotonColors.Ink50,
132132
)
133+
133134
fun phoneDimensions() = FocusDimensions(
134135
onboardingTitle = 24.sp,
135136
onboardingSubtitleOne = 16.sp,

‎mobile/android/focus-android/app/src/main/java/org/mozilla/focus/ui/theme/FocusTypography.kt‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
package org.mozilla.focus.ui.theme
66

7-
import androidx.compose.material.Typography
7+
import androidx.compose.material3.Typography
88
import androidx.compose.runtime.Composable
99
import androidx.compose.runtime.ReadOnlyComposable
1010
import androidx.compose.ui.text.TextStyle
@@ -42,27 +42,30 @@ data class FocusTypography(
4242
val cfrTextStyle: TextStyle,
4343
val cfrCookieBannerTextStyle: TextStyle,
4444
) {
45-
val h1: TextStyle get() = materialTypography.h1
46-
val h2: TextStyle get() = materialTypography.h2
47-
val h3: TextStyle get() = materialTypography.h3
48-
val h4: TextStyle get() = materialTypography.h4
49-
val h5: TextStyle get() = materialTypography.h5
50-
val h6: TextStyle get() = materialTypography.h6
51-
val subtitle1: TextStyle get() = materialTypography.subtitle1
52-
val subtitle2: TextStyle get() = materialTypography.subtitle2
53-
val body1: TextStyle get() = materialTypography.body1
54-
val body2: TextStyle get() = materialTypography.body2
55-
val button: TextStyle get() = materialTypography.button
56-
val caption: TextStyle get() = materialTypography.caption
57-
val overline: TextStyle get() = materialTypography.overline
45+
46+
val displayLarge: TextStyle get() = materialTypography.displayLarge
47+
val displayMedium: TextStyle get() = materialTypography.displayMedium
48+
val displaySmall: TextStyle get() = materialTypography.displaySmall
49+
val headlineLarge: TextStyle get() = materialTypography.headlineLarge
50+
val headlineMedium: TextStyle get() = materialTypography.headlineMedium
51+
val headlineSmall: TextStyle get() = materialTypography.headlineSmall
52+
val titleLarge: TextStyle get() = materialTypography.titleLarge
53+
val titleMedium: TextStyle get() = materialTypography.titleMedium
54+
val titleSmall: TextStyle get() = materialTypography.titleSmall
55+
val bodyLarge: TextStyle get() = materialTypography.bodyLarge
56+
val bodyMedium: TextStyle get() = materialTypography.bodyMedium
57+
val bodySmall: TextStyle get() = materialTypography.bodySmall
58+
val labelLarge: TextStyle get() = materialTypography.labelLarge
59+
val labelMedium: TextStyle get() = materialTypography.labelMedium
60+
val labelSmall: TextStyle get() = materialTypography.labelSmall
5861
}
5962

6063
val focusTypography: FocusTypography
6164
@Composable
6265
@ReadOnlyComposable
6366
get() = FocusTypography(
6467
materialTypography = Typography(
65-
body1 = TextStyle(
68+
bodyLarge = TextStyle(
6669
fontSize = 16.sp,
6770
lineHeight = 24.sp,
6871
),

‎mobile/android/focus-android/app/src/main/java/org/mozilla/focus/utils/ClickableSubstringLink.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ fun ClickableSubstringLink(
3737
text: String,
3838
textColor: Color = colorResource(R.color.cfr_text_color),
3939
linkTextColor: Color = colorResource(R.color.cfr_text_color),
40-
style: TextStyle = focusTypography.body1,
40+
style: TextStyle = focusTypography.bodyLarge,
4141
linkTextDecoration: TextDecoration? = null,
4242
clickableStartIndex: Int,
4343
clickableEndIndex: Int,

0 commit comments

Comments
 (0)