Skip to content

Commit c67349b

Browse files
YuKongAYuKongA
committed
library: Allow customization of some component colors
This is a major commit. Some existing components will change in incompatible ways.
1 parent b847d6a commit c67349b

File tree

21 files changed

+424
-122
lines changed

21 files changed

+424
-122
lines changed

‎composeApp/src/androidMain/AndroidManifest.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<manifest xmlns:tools="http://schemas.android.com/tools"
3-
xmlns:android="http://schemas.android.com/apk/res/android">
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:tools="http://schemas.android.com/tools">
44

55
<application
66
android:allowBackup="true"

‎composeApp/src/commonMain/kotlin/component/OtherComponent.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ fun OtherComponent(padding: PaddingValues) {
122122
onProgressChange = { newProgress -> progress = newProgress },
123123
modifier = Modifier
124124
.padding(horizontal = 12.dp)
125-
.padding(bottom = 12.dp),
125+
.padding(bottom = 12.dp)
126126
)
127127

128128
Slider(
@@ -131,7 +131,7 @@ fun OtherComponent(padding: PaddingValues) {
131131
enabled = false,
132132
modifier = Modifier
133133
.padding(horizontal = 12.dp)
134-
.padding(bottom = 12.dp),
134+
.padding(bottom = 12.dp)
135135
)
136136

137137
SmallTitle(text = "Card")

‎composeApp/src/commonMain/kotlin/component/TextComponent.kt‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -158,28 +158,25 @@ fun TextComponent() {
158158
horizontalArrangement = Arrangement.SpaceBetween
159159
) {
160160
Checkbox(
161-
modifier = Modifier,
162161
checked = checkbox,
163162
onCheckedChange = { checkbox = it }
164-
165163
)
166164
Checkbox(
167-
modifier = Modifier.padding(start = 8.dp),
168165
checked = checkboxTrue,
169-
onCheckedChange = { checkboxTrue = it }
166+
onCheckedChange = { checkboxTrue = it },
167+
modifier = Modifier.padding(start = 8.dp)
170168
)
171169
Checkbox(
172-
modifier = Modifier.padding(start = 8.dp),
173-
enabled = false,
174170
checked = false,
175-
onCheckedChange = { }
176-
171+
onCheckedChange = { },
172+
modifier = Modifier.padding(start = 8.dp),
173+
enabled = false
177174
)
178175
Checkbox(
179-
modifier = Modifier.padding(start = 8.dp),
180-
enabled = false,
181176
checked = true,
182-
onCheckedChange = { }
177+
onCheckedChange = { },
178+
modifier = Modifier.padding(start = 8.dp),
179+
enabled = false
183180
)
184181
}
185182

@@ -235,21 +232,21 @@ fun TextComponent() {
235232
onCheckedChange = { switch = it }
236233
)
237234
Switch(
238-
modifier = Modifier.padding(start = 6.dp),
239235
checked = switchTrue,
240-
onCheckedChange = { switchTrue = it }
236+
onCheckedChange = { switchTrue = it },
237+
modifier = Modifier.padding(start = 6.dp)
241238
)
242239
Switch(
243-
modifier = Modifier.padding(start = 6.dp),
244-
enabled = false,
245240
checked = false,
246-
onCheckedChange = { }
241+
onCheckedChange = { },
242+
modifier = Modifier.padding(start = 6.dp),
243+
enabled = false
247244
)
248245
Switch(
249-
modifier = Modifier.padding(start = 6.dp),
250-
enabled = false,
251246
checked = true,
252-
onCheckedChange = { }
247+
onCheckedChange = { },
248+
modifier = Modifier.padding(start = 6.dp),
249+
enabled = false
253250
)
254251
}
255252

‎composeApp/src/jsMain/resources/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33

44
<head>
55
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta content="width=device-width, initial-scale=1.0" name="viewport">
77
<title>Miuix</title>
8-
<script type="application/javascript" src="skiko.js"></script>
9-
<script type="application/javascript" src="app.js"></script>
10-
<link type="text/css" rel="stylesheet" href="styles.css">
8+
<script src="skiko.js" type="application/javascript"></script>
9+
<script src="app.js" type="application/javascript"></script>
10+
<link href="styles.css" rel="stylesheet" type="text/css">
1111
</head>
1212

1313
<body>
1414
<div id="loading">Loading</div>
1515
<div id="composeApplication"></div>
16-
<script type="application/javascript" src="uitest.js"></script>
16+
<script src="uitest.js" type="application/javascript"></script>
1717
</body>
1818

1919
</html>

‎composeApp/src/wasmJsMain/resources/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33

44
<head>
55
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta content="width=device-width, initial-scale=1.0" name="viewport">
77
<title>Miuix</title>
8-
<link type="text/css" rel="stylesheet" href="styles.css">
8+
<link href="styles.css" rel="stylesheet" type="text/css">
99
<script src="uitest.js"></script>
1010
</head>
1111

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/anim/DecelerateEasing.kt‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
2-
31
package top.yukonga.miuix.kmp.anim
42

53
import androidx.compose.animation.core.Easing

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Button.kt‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
2626
* @param onClick The callback when the [Button] is clicked.
2727
* @param modifier The modifier to be applied to the [Button].
2828
* @param enabled Whether the [Button] is enabled.
29-
* @param colors The [ButtonColors] of the [Button].
3029
* @param cornerRadius The corner radius of the [Button].
3130
* @param minWidth The minimum width of the [Button].
3231
* @param minHeight The minimum height of the [Button].
32+
* @param colors The [ButtonColors] of the [Button].
3333
* @param insideMargin The margin inside the [Button].
3434
* @param content The [Composable] content of the [Button].
3535
*/
@@ -38,11 +38,11 @@ fun Button(
3838
onClick: () -> Unit,
3939
modifier: Modifier = Modifier,
4040
enabled: Boolean = true,
41-
colors: ButtonColors = ButtonDefaults.buttonColors(),
4241
cornerRadius: Dp = ButtonDefaults.ConorRadius,
4342
minWidth: Dp = ButtonDefaults.MinWidth,
4443
minHeight: Dp = ButtonDefaults.MinHeight,
45-
insideMargin: DpSize = DpSize(16.dp, 16.dp),
44+
colors: ButtonColors = ButtonDefaults.buttonColors(),
45+
insideMargin: DpSize = ButtonDefaults.InsideMargin,
4646
content: @Composable RowScope.() -> Unit
4747
) {
4848
Surface(
@@ -88,7 +88,7 @@ fun TextButton(
8888
cornerRadius: Dp = ButtonDefaults.ConorRadius,
8989
minWidth: Dp = ButtonDefaults.MinWidth,
9090
minHeight: Dp = ButtonDefaults.MinHeight,
91-
insideMargin: DpSize = DpSize(16.dp, 16.dp),
91+
insideMargin: DpSize = ButtonDefaults.InsideMargin,
9292
) {
9393
Surface(
9494
onClick = {
@@ -135,6 +135,11 @@ object ButtonDefaults {
135135
*/
136136
val ConorRadius = 16.dp
137137

138+
/**
139+
* The default inside margin applied for all buttons.
140+
*/
141+
val InsideMargin = DpSize(16.dp, 16.dp)
142+
138143
/**
139144
* The default [ButtonColors] for all buttons.
140145
*/

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Card.kt‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@ import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
2020
* This [Card] does not handle input events
2121
*
2222
* @param modifier The modifier to be applied to the [Card].
23-
* @param insideMargin The margin inside the [Card].
2423
* @param cornerRadius The corner radius of the [Card].
24+
* @param insideMargin The margin inside the [Card].
2525
* @param color The color of the [Card].
2626
* @param content The [Composable] content of the [Card].
2727
*/
2828
@Composable
2929
fun Card(
3030
modifier: Modifier = Modifier,
31-
insideMargin: DpSize = DpSize(0.dp, 0.dp),
32-
cornerRadius: Dp = 16.dp,
33-
color: Color = MiuixTheme.colorScheme.surface,
31+
cornerRadius: Dp = CardDefaults.ConorRadius,
32+
insideMargin: DpSize = CardDefaults.InsideMargin,
33+
color: Color = CardDefaults.DefaultColor(),
3434
content: @Composable ColumnScope.() -> Unit
3535
) {
3636
val shape = remember { SmoothRoundedCornerShape(cornerRadius) }
@@ -48,4 +48,23 @@ fun Card(
4848
content = content
4949
)
5050
}
51+
}
52+
53+
object CardDefaults {
54+
55+
/**
56+
* The default corner radius of the [Card].
57+
*/
58+
val ConorRadius = 16.dp
59+
60+
/**
61+
* The default margin inside the [Card].
62+
*/
63+
val InsideMargin = DpSize(0.dp, 0.dp)
64+
65+
/**
66+
* The default color width of the [Card].
67+
*/
68+
@Composable
69+
fun DefaultColor() = MiuixTheme.colorScheme.surface
5170
}

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Checkbox.kt‎

Lines changed: 54 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import androidx.compose.foundation.layout.wrapContentSize
1212
import androidx.compose.foundation.selection.toggleable
1313
import androidx.compose.foundation.shape.RoundedCornerShape
1414
import androidx.compose.runtime.Composable
15+
import androidx.compose.runtime.Immutable
16+
import androidx.compose.runtime.Stable
1517
import androidx.compose.runtime.getValue
1618
import androidx.compose.runtime.mutableStateOf
1719
import androidx.compose.runtime.remember
@@ -22,6 +24,7 @@ import androidx.compose.ui.Modifier
2224
import androidx.compose.ui.draw.clip
2325
import androidx.compose.ui.draw.drawBehind
2426
import androidx.compose.ui.geometry.Offset
27+
import androidx.compose.ui.graphics.Color
2528
import androidx.compose.ui.graphics.Matrix
2629
import androidx.compose.ui.graphics.Path
2730
import androidx.compose.ui.graphics.PathMeasure
@@ -40,23 +43,26 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
4043
* @param checked The current state of the [Checkbox].
4144
* @param onCheckedChange The callback to be called when the state of the [Checkbox] changes.
4245
* @param modifier The modifier to be applied to the [Checkbox].
46+
* @param colors The [CheckboxColors] of the [Checkbox].
4347
* @param enabled Whether the [Checkbox] is enabled.
4448
*/
4549
@Composable
4650
fun Checkbox(
4751
checked: Boolean,
4852
onCheckedChange: ((Boolean) -> Unit)?,
4953
modifier: Modifier = Modifier,
54+
colors: CheckboxColors = CheckboxDefaults.checkboxColors(),
5055
enabled: Boolean = true,
5156
) {
5257
val isChecked by rememberUpdatedState(checked)
5358
var isPressed by remember { mutableStateOf(false) }
5459
val hapticFeedback = LocalHapticFeedback.current
55-
val backgroundColor by animateColorAsState(if (isChecked) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.secondary)
56-
val disabledBackgroundColor by rememberUpdatedState(if (isChecked) MiuixTheme.colorScheme.disabledPrimary else MiuixTheme.colorScheme.disabledSecondary)
57-
val checkboxSize by animateDpAsState(if (!enabled) 22.dp else if (isPressed) 20.dp else 22.dp)
58-
val checkmarkColor by animateColorAsState(if (checked) MiuixTheme.colorScheme.onPrimary else backgroundColor)
59-
val disabledCheckmarkColor by animateColorAsState(if (checked) MiuixTheme.colorScheme.disabledOnPrimary else disabledBackgroundColor)
60+
val checkboxSize by animateDpAsState(
61+
if (!enabled) 22.dp else if (isPressed) 20.dp else 22.dp
62+
)
63+
val backgroundColor by animateColorAsState(
64+
if (isChecked) colors.checkedBackgroundColor(enabled) else colors.uncheckedBackgroundColor(enabled)
65+
)
6066
val rotationAngle by animateFloatAsState(
6167
if (checked) 0f else 25f,
6268
animationSpec = tween(durationMillis = 200)
@@ -107,7 +113,7 @@ fun Checkbox(
107113
Canvas(
108114
modifier = Modifier
109115
.requiredSize(checkboxSize)
110-
.drawBehind { drawRect(if (enabled) backgroundColor else disabledBackgroundColor) }
116+
.drawBehind { drawRect(backgroundColor) }
111117
) {
112118
val svgPath =
113119
"m400-416 236-236q11-11 28-11t28 11q11 11 11 28t-11 28L428-332q-12 12-28 12t-28-12L268-436q-11-11-11-28t11-28q11-11 28-11t28 11l76 76Z"
@@ -123,8 +129,49 @@ fun Checkbox(
123129
val length = pathMeasure.length
124130
val animatedPath = Path()
125131
pathMeasure.getSegment(length * (1 - pathProgress), length, animatedPath, true)
126-
drawPath(animatedPath, if (enabled) checkmarkColor else disabledCheckmarkColor)
132+
drawPath(animatedPath, colors.foregroundColor(enabled))
127133
}
128134
}
129135
}
136+
}
137+
138+
object CheckboxDefaults {
139+
140+
@Composable
141+
fun checkboxColors(
142+
foregroundColor: Color = MiuixTheme.colorScheme.onPrimary,
143+
disabledForegroundColor: Color = MiuixTheme.colorScheme.disabledOnPrimary,
144+
checkedBackgroundColor: Color = MiuixTheme.colorScheme.primary,
145+
uncheckedBackgroundColor: Color = MiuixTheme.colorScheme.secondary,
146+
disabledCheckedBackgroundColor: Color = MiuixTheme.colorScheme.disabledPrimary,
147+
disabledUncheckedBackgroundColor: Color = MiuixTheme.colorScheme.disabledSecondary
148+
): CheckboxColors {
149+
return CheckboxColors(
150+
foregroundColor = foregroundColor,
151+
disabledForegroundColor = disabledForegroundColor,
152+
checkedBackgroundColor = checkedBackgroundColor,
153+
uncheckedBackgroundColor = uncheckedBackgroundColor,
154+
disabledCheckedBackgroundColor = disabledCheckedBackgroundColor,
155+
disabledUncheckedBackgroundColor = disabledUncheckedBackgroundColor
156+
)
157+
}
158+
}
159+
160+
@Immutable
161+
class CheckboxColors(
162+
private val foregroundColor: Color,
163+
private val disabledForegroundColor: Color,
164+
private val checkedBackgroundColor: Color,
165+
private val uncheckedBackgroundColor: Color,
166+
private val disabledCheckedBackgroundColor: Color,
167+
private val disabledUncheckedBackgroundColor: Color
168+
) {
169+
@Stable
170+
internal fun foregroundColor(enabled: Boolean): Color = if (enabled) foregroundColor else disabledForegroundColor
171+
172+
@Stable
173+
internal fun checkedBackgroundColor(enabled: Boolean): Color = if (enabled) checkedBackgroundColor else disabledCheckedBackgroundColor
174+
175+
@Stable
176+
internal fun uncheckedBackgroundColor(enabled: Boolean): Color = if (enabled) uncheckedBackgroundColor else disabledUncheckedBackgroundColor
130177
}

0 commit comments

Comments
 (0)