Material 3 やめました / Good-bye M3 design system

.BUFSJBM΍Ί·ͨ͠ :VLJ"O[BJ !ZBO[N %SPJE,BJHJ Good-bye M3 design system

:VLJ"O[BJ w (PPHMF%FWFMPQFS&YQFSUGPS"OESPJE w 9 UXJUUFS !ZBO[N w CMPHZBO[NCMPHTQPUDPN w
V1IZDB*OD

%SPJE,BJHJ

(PPECZF .BUFSJBMEFTJHOTZTUFN

Why What use instead of (PPECZF .BUFSJBMEFTJHOTZTUFN

"HFOEB w 8IZ w 3FWJFX.BUFSJBM w 1BJOQPJOUPG.EFTJHOTZTUFN w *OTUFBEPG w
)PXUPDSFBUFDVTUPNEFTJHOTZTUFN w )PXUPJNQMFNFOUDVTUPNEFTJHOTZTUFN

3FWJFX.BUFSJBM

.BUFSJBM%FTJHO w BOBEBQUBCMFTZTUFNPGHVJEFMJOFT DPNQPOFOUT BOEUPPMTUIBU TVQQPSUUIFCFTUQSBDUJDFTPGVTFSJOUFSGBDFEFTJHO .BUFSJBM%FTJHO . ʙ .BUFSJBM%FTJHO
. ʙ .BUFSJBM5IFNJOH .BUFSJBM$PNQPOFOUTJNQMFNFOUBUJPO .BUFSJBM%FTJHO . ʙ .BUFSJBM:PV %ZOBNJDDPMPS

%FTJHO5PLFOT

%FTJHO5PLFOT w "EFTJHOWBMVFEF fi OFEXJUIBOBNFBWBSJBCMFUIBUIPMETUIFEFTJHO WBMVF w 6TF%FTJHO5PLFOTBDSPTTEFTJHO DPEF UPPMT
BOEQMBUGPSNT w 1MBUGPSNJOEFQFOEFOUGPSNBU w DBOCFBQQMJFEDPOTJTUFOUMZ w 1MBDFTUIBUSFGFSUPUIFTBNF%FTJHO5PLFOXJMMIBWFUIFTBNFWBMVF

/BNFPG%FTJHO5PLFOT w "OBNFPGEFTJHOTZTUFN w #UZQFPG%FTJHO5PLFO w $BEFTDSJQUJWFOBNFUP DPNNVOJDBUFUIFUPLFO`T SPMF w
TFQBSBUPS w MFGUˠSJHIU(FOFSBMJOGPSNBUJPOˠ4QFDJ fi DJOGPSNBUJPO

5ZQFTPG%FTJHO5PLFOT w 3FGFSFODF5PLFO w 4ZTUFN5PLFO w $PNQPOFOU5PLFO

3FGFSFODF5PLFO w "MMBWBJMBCMFUPLFOTXJUI BTTPDJBUFEWBMVFT w NESFG w %PFTOPUDIBOHFEFQFOEJOH PODPOUFYUT w
DPOUFYUTFH EFWJDFGPSN GBDUPST EBSLUIFNF EQJ

4ZTUFN5PLFO w %FDJTJPOTBOESPMFTUIBUHJWF UIFEFTJHOTZTUFNJUT DIBSBDUFS w NETZT w 1PJOUTUPEJ ff
FSFOU 3FGFSFODF5PLFOT EFQFOEJOHPODPOUFYUT

DPOUFYUTBXBSFUPLFO w 5IFTDSFFOCBDLHSPVOEˠNETZTDPMPSCBDLHSPVOE w NETZTDPMPSCBDLHSPVOEˠEJ ff FSFOUSFGFSFODFUPLFOTGPSMJHIUPS EBSL

$PNQPOFOU5PLFO w 5IFEFTJHOBUUSJCVUFTBTTJHOFE UPFMFNFOUTJOBDPNQPOFOU w FHʣDPMPS BUUSJCVUF PG DPOUBJOFS FMFNFOU
JO'"# ʢDPNQPOFOUʣ w NEDPNQ

.BUFSJBMEFTJHOTZTUFN w %FTJHO5PLFOT w 3FGFSFODF5PLFO w 4ZTUFN5PLFO w $PNQPOFOU5PLFO

.BUFSJBMEFTJHOTZTUFN w %FTJHO5PLFOT w 3FGFSFODF5PLFO w 4ZTUFN5PLFO w $PNQPOFOU5PLFO w
4ZTUFN5PLFO

.BUFSJBMEFTJHOTZTUFN w %FTJHO5PLFOT w 3FGFSFODF5PLFO w 4ZTUFN5PLFO w $PNQPOFOU5PLFO w
4ZTUFN5PLFO w DPMPS DPMPS4DIFNF w UZQPHSBQIZ w TIBQF

$PMPSPG.

,FZDPMPST w LFZDPMPS

5POBMQBMFUUF w "UPOBMQBMFUUF DPOTJTUTPGUIJSUFFO UPOFT w UPOF#MBDL w UPOF8IJUF

5POBMQBMFUUFTPGLFZDPMPST IUUQTNNBUFSJBMJPUIFNFCVJMEFSDVTUPN

QJDLDPMPSTGSPNUPOBMQBMFUUF w 5POBMQBMFUUFPG1SJNBSZ,FZDPMPSˠ$PMPS3PMFTPG1SJNBSZ 1SJNBSZ 0O1SJNBSZ 1SJNBSZ$POUBJOFS 0O1SJNBSZ$POUBJOFS

"DDFOUSPMFT

/FVUSBMSPMFT

&SSPSSPMFT

$PMPSPG. w DPMPSTDIFNF w LFZDPMPS FSSPS w QJDLDPMPSTGSPNUPOBMQBMFUUFˠ3PMF w $PMPS3PMFT
w 1SJNBSZ PO1SJNBSZ 4FDPOEBSZ ʜ

5ZQPHSBQIZPG.

5ZQPHSBQIZPG. w 3PMFT w %JTQMBZ w )FBEMJOF w 5JUMF w
#PEZ w -BCFM w TDBMFTQFS3PMF w -BSHF w .FEJVN w 4NBMM

4IBQFPG.

4IBQFPG. w MFWFMTEFQFOEJOHPOUIFTDBMFPGTIBQF w /POF &YUSBTNBMM 4NBMM .FEJVN -BSHF
&YUSBMBSHF 'VMM

1BJOQPJOUPG .EFTJHOTZTUFN

5IFNPTUDSJUJDBMQBJOQPJOUJTʜ

5IFNPTUDSJUJDBMQBJOQPJOUJTʜ $PMPS

1BJOQPJOUPG.DPMPS w 8FXBOUUPVTFCSBOEDPMPSOPUUPOBMQBMFUUFDPMPS

1BJOQPJOUPG.DPMPS w 8FXBOUUPVTFCSBOEDPMPSOPUUPOBMQBMFUUFDPMPS https://m3.material.io/theme-builder#/custom ˌBF ˌEB

1BJOQPJOUPG.DPMPS w 8FXBOUUPVTFCSBOEDPMPSOPUUPOBMQBMFUUFDPMPS w .BOVBMMZBEKVTUJOHUIFDPMPSTPOUIF.JTEJ ff i DVMU

1BJOQPJOUPG.DPMPS w 8FXBOUUPVTFCSBOEDPMPSOPUUPOBMQBMFUUFDPMPS w .BOVBMMZBEKVTUJOHUIFDPMPSTPOUIF.JTEJ ff i DVMU w /PUFOPVHIDPMPS
w "EEJOHDVTUPNDPMPSEPFTOPUTVQQPSU%ZOBNJD$PMPS

w "EEJOHDVTUPNDPMPSEPFTOPUTVQQPSU%ZOBNJD$PMPS w "EEJOHDVTUPNDPMPSBMTPEPFTOPUTVQQPSU%BSL.PEF

$VTUPNDPMPSPG. val Colors.container: Color get() = if (isLight) Color.Blue else
Color.Red

$VTUPNDPMPSPG. val ColorScheme.container: Color @Composable get() = if (!isSystemInDarkTheme()) Color.Blue
else Color.Red

MyM3Theme { Surface { Row { Spacer( modifier = Modifier
… .background(MaterialTheme.colorScheme.container) ) Box { MyM3Theme(darkTheme = true) { Surface { Spacer( modifier = Modifier … .background(MaterialTheme.colorScheme.container) ) } } } } } } M2 M3 isSystemInDarkTheme()TUJMMGBMTF MJHIU EBSL

w "EEJOHDVTUPNDPMPSEPFTOPUTVQQPSU%ZOBNJD$PMPS w "EEJOHDVTUPNDPMPSBMTPEPFTOPUTVQQPSU%BSL.PEF #FUUFSUPVTFBMMZPVSPXODPMPSEF fi OJUJPOT

)PXUPDSFBUFDVTUPN EFTJHOTZTUFN

$VTUPNEFTJHOTZTUFN w 6UJMJ[JOH.EFTJHOUPLFONFDIBOJTN w 3FGFSFODF5PLFO w 4ZTUFN5PLFO w $PNQPOFOU5PLFO

3FBTPOGPSOPUVTJOH$PNQPOFOU5PLFO w $PNQPOFOU5PLFOJTVTFEJOTPNFDPNQPOFOUTPG. CVUUIF SFGFSFODFTBSFEFFQBOEEJ ffi DVMUUPGPMMPX w 8FEPOUOFFEUIBUNVDIBCTUSBDUJPO

3FBTPOGPSOPUVTJOH$PNQPOFOU5PLFO w $PNQPOFOU5PLFOJTVTFEJOTPNFDPNQPOFOUTPG. CVUUIF SFGFSFODFTBSFEFFQBOEEJ ffi DVMUUPGPMMPX w 8FEPOUOFFEUIBUNVDIBCTUSBDUJPO w
%FTJHO5PLFOJTQMBUGPSNJOEFQFOEFOU CVUDPNQPOFOUTBSFQMBUGPSN EFQFOEFOU "OESPJEJ048FC

@Composable fun buttonColors( containerColor: Color = FilledButtonTokens.ContainerColor.toColor(), … ): ButtonColors
= ButtonColors( containerColor = containerColor, … ) . $PNQPOFOU5PLFO

= ButtonColors( containerColor = containerColor, … ) internal object FilledButtonTokens { val ContainerColor = ColorSchemeKeyTokens.Primary … } .

internal enum class ColorSchemeKeyTokens { … Primary, … } @Composable
fun buttonColors( containerColor: Color = FilledButtonTokens.ContainerColor.toColor(), … ): ButtonColors = ButtonColors( containerColor = containerColor, … ) internal object FilledButtonTokens { val ContainerColor = ColorSchemeKeyTokens.Primary … } .

= ButtonColors( containerColor = containerColor, … ) @ReadOnlyComposable @Composable internal fun ColorSchemeKeyTokens.toColor(): Color { return MaterialTheme.colorScheme.fromToken(this) } internal fun ColorScheme.fromToken(value: ColorSchemeKeyTokens): Color { return when (value) { … ColorSchemeKeyTokens.Primary -> primary … } } .

8JUIPVU$PNQPOFOU5PLFO @Composable fun buttonColors( containerColor: Color = MyTheme.colorScheme.primary, … ):
ButtonColors = ButtonColors( containerColor = containerColor, … )

)PXUPEFDJEFUIFUZQFPG4ZTUFN5PLFO

)PXUPEFDJEFUIFUZQFPG4ZTUFN5PLFO w .DPMPS UZQPHSBQIZ TIBQF

)PXUPEFDJEFUIFUZQFPG4ZTUFN5PLFO w $BOXFHFUIFMQGSPNBEFTJHOFS w ZFT w *EFOUJGZUIFUZQFTPGTZTUFNUPLFOZPVXJMMOFFEBOEUIFO JNQMFNFOUJU w
OP w 1SFQBSFPOMZUIFDPMPSBOEUZQPHSBQIZBTTZTUFNUPLFO BEEBOE NBJOUBJOUIFOFDFTTBSZJUFNTXIJMFJNQMFNFOUJOHUIFBQQ

4ZTUFN5PLFO3FDPNNFOEFE *OJUJBM4FUUJOHT

4ZTUFN5PLFO*OJUJBM4FUUJOHT w $PMPS w CBDLHSPVOE w GPSDPOUFOUT UFYUDPMPS w FHPO#BDLHSPVOE
PO#BDLHSPVOE7BSJBOU w FHUFYU1SJNBSZ UFYU4FDPOEBSZ w FHDPOUFOU)JHI DPOUFOU.JE w QSJNBSZʢPQUJPOBMʣ

4ZTUFN5PLFO*OJUJBM4FUUJOHT w 5ZQPHSBQIZ w CPEZ-BSHF w CPEZ.FEJVN

0QUJPOBM w %JNFOTJPO w TQBDJOHʢEQ EQ ʜʣ w SBEJVT

*NQMFNFOUBUJPOPGDVTUPN EFTJHOTZTUFN

.PEVMFGPSEFTJHOTZTUFN w NPEVMFOBNFJTPQUJPOBM w FH DPSFEFTJHOTZTUFN w TFUVQDPNQPTF

android { … buildFeatures { compose = true } composeOptions
{ kotlinCompilerExtensionVersion = "1.5.1" } } dependencies { … implementation(platform("androidx.compose:compose-bom:2023.08.00")) implementation("androidx.compose.material3:material3") } CVJMEHSBEMFLUT DPSFEFTJHOTZTUFN

… dependencies { implementation(project(":core:design-system")) implementation(platform("androidx.compose:compose-bom:2023.08.00")) implementation("androidx.compose.foundation:foundation") … } CVJMEHSBEMFLUT BQQ

$PMPS5PLFOT internal object MyColorLightTokens { val Primary = Color(0xFF3D6A00) val
Background = Color(0xffffffff) val OnBackground = Color(0xde000000) } internal object MyColorDarkTokens { val Primary = Color(0xFF95D94A) val Background = Color(0xff141816) val OnBackground = Color(0xffffffff) } DPSFEFTJHOTZTUFN

$VTUPN$PMPSDMBTT @Stable class MyColor( primary: Color, background: Color, onBackground: Color,
) { var primary by mutableStateOf(primary, structuralEqualityPolicy()) internal set var background by mutableStateOf(background, structuralEqualityPolicy()) internal set var onBackground by mutableStateOf(onBackground, structuralEqualityPolicy()) internal set … } DPSFEFTJHOTZTUFN

fun lightMyColor( primary: Color = MyColorLightTokens.Primary, background: Color = MyColorLightTokens.Background,
onBackground: Color = MyColorLightTokens.OnBackground, ): MyColor = MyColor( … ) fun darkMyColor( primary: Color = MyColorDarkTokens.Primary, background: Color = MyColorDarkTokens.Background, onBackground: Color = MyColorDarkTokens.OnBackground, ): MyColor = MyColor( … ) … internal val LocalMyColor = staticCompositionLocalOf { lightMyColor() } DPSFEFTJHOTZTUFN

$PNQPTJUJPO-PDBM My blog article → https://y-anz-m.blogspot.com/2021/04/jetpack-compose-composition-local.html

$PNQPTJUJPO-PDBM My blog article → https://y-anz-m.blogspot.com/2021/04/jetpack-compose-composition-local.html val MyLocalColor = staticCompositionLocalOf
{ Color.Red }

{ Color.Red } Text( text = "hello", color = MyLocalColor.current, // Color.Red )

{ Color.Red } Text( text = "hello", color = MyLocalColor.current, // Color.Red ) CompositionLocalProvider(MyLocalColor provides Color.Blue) { Text( text = "hello", color = MyLocalColor.current, // Color.Blue ) }

5ZQPHSBQIZ

5ZQPHSBQIZ5PLFOT internal object MyTypographyTokens { val BodyLarge = TextStyle( fontFamily
= FontFamily.SansSerif, fontWeight = FontWeight.Normal, fontSize = 16.sp, lineHeight = 24.0.sp, letterSpacing = 0.5.sp, ) val BodyMedium = TextStyle( fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 20.0.sp, letterSpacing = 0.2.sp, ) } DPSFEFTJHOTZTUFN

$VTUPN5ZQPHSBQIZDMBTT @Immutable data class MyTypography( val bodyLarge: TextStyle = MyTypographyTokens.BodyLarge,
val bodyMedium: TextStyle = MyTypographyTokens.BodyMedium, ) internal val LocalMyTypography = staticCompositionLocalOf { MyTypography() } DPSFEFTJHOTZTUFN

.Z5IFNFDPNQPTBCMF

.Z5IFNFPCKFDU object MyTheme { val color: MyColor @Composable @ReadOnlyComposable get()
= LocalMyColor.current val typography: MyTypography @Composable @ReadOnlyComposable get() = LocalMyTypography.current } DPSFEFTJHOTZTUFN

5IFNFDPNQPTBCMFGPSEFTJHOTZTUFN w FRVJWBMFOUUP.BUFSJBM5IFNFDPNQPTBCMF w JOUFSOBM

@Composable internal fun BaseMyTheme( color: MyColor = MyTheme.color, typography: MyTypography
= MyTheme.typography, content: @Composable () -> Unit, ) { val rememberedColors = remember { color.copy() }.apply { updateMyColorFrom(color) } val selectionColors = rememberTextSelectionColors(rememberedColors) CompositionLocalProvider( LocalIndication provides rememberRipple(), LocalRippleTheme provides MaterialRippleTheme, LocalTextSelectionColors provides selectionColors, LocalMyColor provides rememberedColors, LocalMyTypography provides typography, ) { ProvideTextStyle(value = typography.bodyLarge, content = content) } } DPSFEFTJHOTZTUFN

@Composable internal fun BaseMyTheme( color: MyColor = MyTheme.color, typography: MyTypography
= MyTheme.typography, content: @Composable () -> Unit, ) { … CompositionLocalProvider( LocalIndication provides rememberRipple(), LocalRippleTheme provides MaterialRippleTheme, … ) { ProvideTextStyle(value = typography.bodyLarge, content = content) } } @Immutable private object MaterialRippleTheme : RippleTheme { @Composable override fun defaultColor() = LocalContentColor.current @Composable override fun rippleAlpha() = RippleAlpha(…) } DPSFEFTJHOTZTUFN

VTFSFNFNCFS3JQQMF JOBQQNPEVMF Box( modifier = Modifier… .clickable( onClick = onClick,
role = Role.Button, interactionSource = remember { MutableInteractionSource() }, indication = rememberRipple( bounded = false, radius = 24.dp, ) ), ) {

VTFSFNFNCFS3JQQMF JOBQQNPEVMF w JNQMFNFOUBXSBQQFSNFUIPEJOEFTJHOTZTUFNNPEVMF @Composable fun rememberRipple( bounded: Boolean =
true, radius: Dp = Dp.Unspecified, color: Color = Color.Unspecified ): Indication { return androidx.compose.material.ripple.rememberRipple( bounded = bounded, radius = radius, color = color, ) } DPSFEFTJHOTZTUFN

VTFSFNFNCFS3JQQMF JOBQQNPEVMF w JNQMFNFOUBXSBQQFSNFUIPEJOEFTJHOTZTUFNNPEVMF w BEElNBUFSJBMSJQQMFMJCSBSZUPBQQNPEVMF dependencies { … implementation(platform("androidx.compose:compose-bom:2023.08.00"))
implementation("androidx.compose.foundation:foundation") implementation("androidx.compose.material:material-ripple") … } BQQ

5IFNFDPNQPTBCMFGPSBQQ w FRVJWBMFOUUPUIFUIFNFBVUPNBUJDBMMZDSFBUFEXIFODSFBUJOHBQSPKFDU w QVCMJD @Composable fun MyTheme( darkTheme: Boolean
= isSystemInDarkTheme(), content: @Composable () -> Unit ) { BaseMyTheme( color = if (!darkTheme) lightMyColor() else darkMyColor(), typography = MyTypography(), content = content ) } DPSFEFTJHOTZTUFN

.JHSBUJOHGSPN. PS. @Composable fun MyTheme( darkTheme: Boolean = isSystemInDarkTheme(), content:
@Composable () -> Unit ) { BaseMyTheme( color = if (!darkTheme) lightMyColor() else darkMyColor(), typography = MyTypography(), ) { MaterialTheme( colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme, content = content ) } } DPSFEFTJHOTZTUFN

*NQMFNFOUBUJPOPG DPNQPOFOUT

*NQMFNFOUBUJPOPGDPNQPOFOUT w .DPNQPOFOUTDBOOPUCFVTFEBTJT

*NQMFNFOUBUJPOPGDPNQPOFOUT w .DPNQPOFOUTDBOOPUCFVTFEBTJT @Preview @Composable private fun Preview() { MyTheme
{ androidx.compose.material3.Checkbox( checked = true, onCheckedChange = {} ) } }

object CheckboxDefaults { @Composable fun colors( checkedColor: Color = MaterialTheme.colorScheme.fromToken(CheckboxTokens.SelectedContainerColor)
… ): CheckboxColors = CheckboxColors( checkedBoxColor = checkedColor, … ) } object MaterialTheme { val colorScheme: ColorScheme @Composable @ReadOnlyComposable get() = LocalColorScheme.current … } ColorSchemeKeyTokens.Primary .

@Composable fun MaterialTheme( colorScheme: ColorScheme = MaterialTheme.colorScheme, … ) {
… CompositionLocalProvider( LocalColorScheme provides rememberedColorScheme, … ) { … } } object MaterialTheme { val colorScheme: ColorScheme @Composable @ReadOnlyComposable get() = LocalColorScheme.current … } .

@Preview @Composable private fun Preview() { MaterialTheme( colorScheme = lightColorScheme(
primary = Color.Blue ) ) { androidx.compose.material3.Checkbox( checked = true, onCheckedChange = {} ) } }

$PNQPOFOUTPGDVTUPNEFTJHOTZTUFN w XSBQQFSPG.DPNQPOFOUT w DPNQPOFOUTXJUIDVTUPNJNQMFNFOUBUJPO

$PNQPOFOUTPGDVTUPNEFTJHOTZTUFN w OBNFPGDPNQPOFOUT w DVSSFOUMZBQQVTFT. w /PˠOPQSF fi YFHʣ$IFDLCPY w
:FTˠXJUIQSF fi YFHʣ.Z$IFDLCPY w BWPJEUIFNJTUBLFPGJNQPSUJOH.DPNQPOFOUT w SFOBNFBGUFSSFNPWJOH.EFQFOEFODJFTGSPNBQQNPEVMF

@Composable fun Checkbox( checked: Boolean, onCheckedChange: ((Boolean) -> Unit)?, modifier:
Modifier = Modifier, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } ) { TODO() } $VTUPN

@Composable fun Checkbox( … ) { val borderColor = MyTheme.color.onBackground.copy(alpha
= 0.4f) val disabledBorderColor = borderColor.let { it.copy(alpha = it.alpha * DisabledAlpha) } androidx.compose.material3.Checkbox( checked = checked, onCheckedChange = onCheckedChange, modifier = modifier, enabled = enabled, colors = CheckboxDefaults.colors( checkedColor = MyTheme.color.primary, uncheckedColor = borderColor, checkmarkColor = MyTheme.color.background, disabledCheckedColor = disabledBorderColor, disabledUncheckedColor = disabledBorderColor, disabledIndeterminateColor = disabledBorderColor ), interactionSource = interactionSource, ) } $VTUPN

internal object MyColorLightTokens { val Primary = Color(0xFF3D6A00) val Background
= Color(0xffffffff) val OnBackground = Color(0xde000000) val Border = Color(0x66000000) } internal object MyColorDarkTokens { val Primary = Color(0xFF95D94A) val Background = Color(0xff141816) val OnBackground = Color(0xffffffff) val Border = Color(0x66ffffff) } $VTUPN

@Stable class MyColor( primary: Color, … border: Color, ) {
… var border by mutableStateOf(border, structuralEqualityPolicy()) internal set fun copy( … border: Color = this.border, ): MyColor = MyColor( … border = border, ) } $VTUPN

fun lightMyColor( … border: Color = MyColorLightTokens.Border, ): MyColor =
MyColor( … border = border, ) fun darkMyColor( … border: Color = MyColorDarkTokens.Border, ): MyColor = MyColor( … border = border, ) $VTUPN

@Composable fun Checkbox( … ) { val borderColor = MyTheme.color.border
val disabledBorderColor = borderColor.let { it.copy(alpha = it.alpha * DisabledAlpha) } androidx.compose.material3.Checkbox( checked = checked, onCheckedChange = onCheckedChange, modifier = modifier, enabled = enabled, colors = CheckboxDefaults.colors( checkedColor = MyTheme.color.primary, uncheckedColor = borderColor, checkmarkColor = MyTheme.color.background, disabledCheckedColor = disabledBorderColor, disabledUncheckedColor = disabledBorderColor, disabledIndeterminateColor = disabledBorderColor ), interactionSource = interactionSource, ) } $VTUPN

@Composable fun Divider( modifier: Modifier = Modifier, ) { androidx.compose.material3.Divider(
modifier = modifier, thickness = 1.dp, color = MyTheme.color.border, ) } $VTUPN

$PNQPOFOUTXJUI4UBUF

$PNQPOFOUTXJUI4UBUF w .PEBM#PUUPN4IFFUBOE4IFFU4UBUF w 4OBDLCBS)PTUBOE4OBDLCBS)PTU4UBUF w .PEBM/BWJHBUJPO%SBXFSBOE%SBXFS4UBUF w ʜ w
OFFEBXSBQQFSGPS4UBUF

FH 4OBDLCBS

FH 4OBDLCBS w 4OBDLCBS%BUB w 4OBDLCBS3FTVMU w 4OBDLCBS%VSBUJPO w 4OBDLCBS)PTU4UBUF
w 4OBDLCBS w 4OBDLCBS)PTU w SFNFNCFS4OBDLCBS)PTU4UBUF

@JvmInline value class SnackbarData(val delegate: androidx.compose.material3.SnackbarData) $VTUPN

enum class SnackbarResult { Dismissed, ActionPerformed, } enum class SnackbarDuration
{ Short, Long, Indefinite } @JvmInline value class SnackbarData(val delegate: androidx.compose.material3.SnackbarData) $VTUPN

@Composable fun Snackbar( snackbarData: SnackbarData, modifier: Modifier = Modifier, actionOnNewLine:
Boolean = false, ) { androidx.compose.material3.Snackbar( snackbarData = snackbarData.delegate, modifier = modifier, actionOnNewLine = actionOnNewLine, shape = RoundedCornerShape(4.dp), containerColor = MyTheme.color.onBackground.copy(alpha = 0.9f) .compositeOver(MyTheme.color.background), contentColor = MyTheme.color.background, actionColor = MyTheme.color.background, actionContentColor = MyTheme.color.background, dismissActionContentColor = MyTheme.color.background, ) } $VTUPN

@Stable class SnackbarHostState(val delegate: androidx.compose.material3.SnackbarHostState) { suspend fun showSnackbar( message:
String, actionLabel: String? = null, withDismissAction: Boolean = false, duration: SnackbarDuration = … ): SnackbarResult { val result = delegate.showSnackbar( message = message, actionLabel = actionLabel, withDismissAction = withDismissAction, duration = when (duration) { SnackbarDuration.Short -> androidx.compose.material3.SnackbarDuration.Short … }, ) return when (result) { androidx.compose.material3.SnackbarResult.Dismissed -> SnackbarResult.Dismissed … } } } $VTUPN

@Composable fun SnackbarHost( hostState: SnackbarHostState, modifier: Modifier = Modifier, snackbar:
@Composable (SnackbarData) -> Unit = { Snackbar(it) } ) { androidx.compose.material3.SnackbarHost( hostState = hostState.delegate, modifier = modifier, snackbar = { snackbar(SnackbarData(it)) }, ) } $VTUPN

@Composable fun rememberSnackbarHostState(): SnackbarHostState { return remember { SnackbarHostState(androidx.compose.material3.SnackbarHostState()) }
} $VTUPN

val snackbarHostState = rememberSnackbarHostState() LaunchedEffect(Unit) { snackbarHostState.showSnackbar(message = "message") }
Scaffold( snackbarHost = { SnackbarHost( hostState = snackbarHostState, ) } ) { … } BQQ

-PDBM$POUFOU$PMPS 5FYU*DPODPNQPTBCMF

XSBQQFSPG5FYUDPNQPTBCMF w %FGBVMUWBMVFPGDPMPSTIPVMECF$PMPS6OTQFDJ fi FE @Composable fun Text( … color:
Color = Color.Unspecified, … ) { androidx.compose.material3.Text( … color = color, … ) } 0, = MyTheme.color.onBackground, /( $VTUPN

-PDBM$POUFOU$PMPS @Composable fun Text( … color: Color = Color.Unspecified, …
style: TextStyle = LocalTextStyle.current ) { val textColor = color.takeOrElse { style.color.takeOrElse { LocalContentColor.current } } … BasicText( … ) } UIFDPMPSTQFDJ fi FECZUIF DPMPSBSHVNFOU UIFDPMPSTQFDJ fi FEJOTUZMF UIFDPMPSPG -PDBM$POUFOU$PMPS .

@Composable fun Button( … colors: ButtonColors = ButtonDefaults.buttonColors(), …, )
{ val containerColor = colors.containerColor(enabled).value val contentColor = colors.contentColor(enabled).value … Surface( … ) { CompositionLocalProvider(LocalContentColor provides contentColor) { ProvideTextStyle(value = MaterialTheme.typography.labelLarge) { Row( … verticalAlignment = Alignment.CenterVertically, content = content ) } } } } .

Button( onClick = { }, ) { Text( text =
"button", ) } Button( onClick = { }, enabled = false, ) { Text( text = "button", ) } .

Button( onClick = { }, ) { Text( text =
"button", color = MyTheme.color.onBackground, ) } Button( onClick = { }, enabled = false, ) { Text( text = "button", color = MyTheme.color.onBackground, ) } /( /(

XSBQQFSPG*DPODPNQPTBCMF w %FGBVMUWBMVFPGUJOUTIPVMECF-PDBM$POUFOU$PMPSDVSSFOU @Composable fun Icon( … tint: Color =
LocalContentColor.current, ) { androidx.compose.material3.Icon( … tint = tint, ) } 0, = MyTheme.color.onBackground, /( $VTUPN

-PDBM5FYU4UZMFQSPCMFN

-PDBM5FYU4UZMF @Composable fun Text( … color: Color = Color.Unspecified, …
style: TextStyle = LocalTextStyle.current ) { … val mergedStyle = style.merge( … ) BasicText( … mergedStyle, … ) } .

5PQ"QQ#BS @Composable fun TopAppBar( title: @Composable () -> Unit, …
) { SingleRowTopAppBar( … titleTextStyle = MaterialTheme.typography.fromToken(TopAppBarSmallTokens.HeadlineFont), … ) } val HeadlineFont = TypographyKeyTokens.TitleLarge .

@Composable private fun SingleRowTopAppBar( … titleTextStyle: TextStyle, … ) {
… Surface(…) { … TopAppBarLayout( … titleTextStyle = titleTextStyle, … ) } } .

@Composable private fun TopAppBarLayout( … title: @Composable () -> Unit,
titleTextStyle: TextStyle, … ) { Layout( { … Box( Modifier .layoutId("title") … ) { ProvideTextStyle(value = titleTextStyle) { CompositionLocalProvider( LocalContentColor provides titleContentColor, content = title ) } } … } .

@Composable private fun TopAppBarLayout( … title: @Composable () -> Unit,
titleTextStyle: TextStyle, … ) { Layout( { … Box( Modifier .layoutId("title") … ) { ProvideTextStyle(value = titleTextStyle) { CompositionLocalProvider( LocalContentColor provides titleContentColor, content = title ) } } … } @Composable fun ProvideTextStyle(value: TextStyle, content: @Composable () -> Unit) { val mergedStyle = LocalTextStyle.current.merge(value) CompositionLocalProvider(LocalTextStyle provides mergedStyle, content = content) } .

TopAppBar( title = { Text("title") } ) LocalTextStyle : MaterialTheme.typography.titleLarge
MaterialTheme.typography.titleLarge .

-PDBM5FYU4UZMFQSPCMFN

-PDBM5FYU4UZMFQSPCMFN TopAppBar( title = { Text("title") } ) MaterialTheme.typography.titleLarge 0,
/( TopAppBar( title = { Text( text = "title", style = MyTheme.typography.titleLarge ) } )

@Composable fun TopAppBar( title: String, … ) { androidx.compose.material3.TopAppBar( title
= { Text( text = title, style = MyTheme.typography.titleLarge ) }, … ) } $VTUPN

%FTJHO5PLFOPG#

4ZTUFN5PLFOTPG# w DPMPS w UZQPHSBQIZ w EJNFOTJPO w EF fi
OFTJ[FT TQBDJOH CPSEFSXJEUI SBEJVT w PQBDJUZ w EF fi OFBMQIBXIFOEJTBCMFE https://blog.smartbank.co.jp/entry/2023/06/19/095816

(SPVQJOH @Immutable class B43Color( backgroundColors: BackgroundColors, … ) { var
backgroundColors by mutableStateOf(backgroundColors, structuralEqualityPolicy()) internal set … @Immutable data class BackgroundColors( val defaultBase: Color, val defaultAccent: Color, val inverseBase: Color, ) … }

fun b43LightColor( backgroundColors: B43Color.BackgroundColors = B43Color.BackgroundColors( defaultBase = B43ColorBackgroundTokensLight.DefaultBase, defaultAccent
= B43ColorBackgroundTokensLight.DefaultAccent, inverseBase = B43ColorBackgroundTokensLight.InverseBase, ), … ): B43Color = B43Color( backgroundColors = backgroundColors, … ) @Composable fun TopAppBar( … containerColor: Color = B43Theme.color.backgroundColors.defaultBase, … ) {

%JNFOTJPO @Immutable data class B43Dimension( val border: B43DimensionBorder = B43DimensionBorder(),
val radius: B43DimensionRadius = B43DimensionRadius(), val spacing: B43DimensionSpacing = B43DimensionSpacing(), ) @Immutable data class B43DimensionSpacing( … val small: Dp = B43DimensionSpacingTokens.Small, val medium: Dp = B43DimensionSpacingTokens.Medium, val large: Dp = B43DimensionSpacingTokens.Large, … ) Column( verticalArrangement = Arrangement.spacedBy(B43Theme.dimension.spacing.large), ) {

4VNNBSZ w *UJTEJ ffi DVMUUPVTF.TEFTJHOTZTUFNGPSBQQTUIBUIBWFB fi YFE CSBOEDPMPS w 5IFSFJTBXBZUPDSFBUFZPVSPXOEFTJHOTZTUFN
w 1SFQBSFBNPEVMFGPSUIFDVTUPNEFTJHOTZTUFNBOEJNQMFNFOUUIF EFTJHOTZTUFNBOEDPNQPOFOUT w $PODFBM.JOTJEFUIFEFTJHOTZTUFNNPEVMF w 8FXBOUDPNQPOFOUTUIBUJOEFQFOEFOUPGUIF.EFTJHOTZTUFN

5IBOLZPV

Material 3 やめました / Good-bye M3 design system

Material 3 やめました / Good-bye M3 design system

More Decks by Yuki Anzai

Other Decks in Technology

Featured

Transcript