Skip to content

Commit 9fc4962

Browse files
VoempYuKongA
Voemp
and
YuKongA
authored
library: Refactor color scheme (#13)
* library: Refactor color scheme --------- Co-authored-by: 余空 <[email protected]>
1 parent c2d4711 commit 9fc4962

File tree

21 files changed

+322
-166
lines changed

21 files changed

+322
-166
lines changed

‎composeApp/src/commonMain/kotlin/MainPage.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ fun MainPage(
5555
modifier = Modifier.padding(horizontal = 12.dp),
5656
imageVector = MiuixIcons.Search,
5757
colorFilter = BlendModeColorFilter(
58-
MiuixTheme.colorScheme.onPrimary,
58+
MiuixTheme.colorScheme.onSurfaceContainer,
5959
BlendMode.SrcIn
6060
),
6161
contentDescription = "Search"

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

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import androidx.compose.runtime.mutableStateOf
1616
import androidx.compose.runtime.remember
1717
import androidx.compose.runtime.setValue
1818
import androidx.compose.ui.Modifier
19-
import androidx.compose.ui.graphics.Color
2019
import androidx.compose.ui.platform.LocalFocusManager
2120
import androidx.compose.ui.text.font.FontWeight
2221
import androidx.compose.ui.text.input.ImeAction
@@ -34,7 +33,7 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
3433
@Composable
3534
fun OtherComponent(padding: PaddingValues) {
3635

37-
var buttonText by remember { mutableStateOf("Button") }
36+
var buttonText by remember { mutableStateOf("Cancel") }
3837
var submitButtonText by remember { mutableStateOf("Submit") }
3938
var clickCount by remember { mutableStateOf(0) }
4039
var submitClickCount by remember { mutableStateOf(0) }
@@ -79,15 +78,15 @@ fun OtherComponent(padding: PaddingValues) {
7978
Button(
8079
modifier = Modifier.weight(1f),
8180
text = "Disabled",
82-
submit = true,
81+
submit = false,
8382
enabled = false,
8483
onClick = {}
8584
)
8685
Spacer(Modifier.width(12.dp))
8786
Button(
8887
modifier = Modifier.weight(1f),
8988
text = "Disabled",
90-
submit = false,
89+
submit = true,
9190
enabled = false,
9291
onClick = {}
9392
)
@@ -104,7 +103,7 @@ fun OtherComponent(padding: PaddingValues) {
104103
TextField(
105104
value = text2,
106105
onValueChange = { text2 = it },
107-
backgroundColor = MiuixTheme.colorScheme.primaryContainer,
106+
backgroundColor = MiuixTheme.colorScheme.secondaryContainer,
108107
label = "Text Field",
109108
modifier = Modifier.padding(horizontal = 12.dp),
110109
keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
@@ -128,47 +127,53 @@ fun OtherComponent(padding: PaddingValues) {
128127
modifier = Modifier
129128
.fillMaxWidth()
130129
.padding(horizontal = 12.dp, vertical = 12.dp),
130+
color = MiuixTheme.colorScheme.primaryVariant,
131131
insideMargin = DpSize(16.dp, 16.dp)
132132
) {
133-
CardView()
133+
Text(
134+
color = MiuixTheme.colorScheme.onPrimary,
135+
text = "Card 123456789",
136+
fontSize = 19.sp,
137+
fontWeight = FontWeight.Bold
138+
)
139+
Text(
140+
color = MiuixTheme.colorScheme.onPrimaryVariant,
141+
text = "一二三四五六七八九",
142+
fontSize = 15.sp,
143+
fontWeight = FontWeight.Normal
144+
)
134145
}
135146

136147
Card(
137148
modifier = Modifier
138149
.fillMaxWidth()
139150
.padding(horizontal = 12.dp)
140151
.padding(bottom = 12.dp + padding.calculateBottomPadding()),
141-
color = MiuixTheme.colorScheme.primary,
142152
insideMargin = DpSize(16.dp, 16.dp)
143153
) {
144-
CardView(color = Color.White)
154+
val color = MiuixTheme.colorScheme.onSurface
155+
Text(
156+
color = color,
157+
text = "Card",
158+
style = MiuixTheme.textStyles.paragraph,
159+
fontWeight = FontWeight.SemiBold,
160+
fontSize = 16.sp
161+
)
162+
Spacer(Modifier.height(6.dp))
163+
Text(
164+
color = color,
165+
text = "123456789",
166+
style = MiuixTheme.textStyles.paragraph
167+
)
168+
Text(
169+
color = color,
170+
text = "一二三四五六七八九",
171+
style = MiuixTheme.textStyles.paragraph
172+
)
173+
Text(
174+
color = color,
175+
text = "!@#$%^&*()_+-=",
176+
style = MiuixTheme.textStyles.paragraph
177+
)
145178
}
146-
147-
}
148-
149-
@Composable
150-
fun CardView(color: Color = MiuixTheme.colorScheme.onBackground) {
151-
Text(
152-
color = color,
153-
text = "Card",
154-
style = MiuixTheme.textStyles.paragraph,
155-
fontWeight = FontWeight.SemiBold,
156-
fontSize = 16.sp
157-
)
158-
Spacer(Modifier.height(6.dp))
159-
Text(
160-
color = color,
161-
text = "123456789",
162-
style = MiuixTheme.textStyles.paragraph
163-
)
164-
Text(
165-
color = color,
166-
text = "一二三四五六七八九",
167-
style = MiuixTheme.textStyles.paragraph
168-
)
169-
Text(
170-
color = color,
171-
text = "!@#$%^&*()_+-=",
172-
style = MiuixTheme.textStyles.paragraph
173-
)
174179
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ fun TextComponent() {
185185
Text(
186186
modifier = Modifier.padding(end = 6.dp),
187187
text = miuixSuperRightCheckbox,
188-
color = MiuixTheme.colorScheme.subTextBase
188+
color = MiuixTheme.colorScheme.onSurfaceVariantActions
189189
)
190190
},
191191
onCheckedChange = {
@@ -225,7 +225,7 @@ fun TextComponent() {
225225
Text(
226226
modifier = Modifier.padding(end = 6.dp),
227227
text = miuixSuperSwitch,
228-
color = MiuixTheme.colorScheme.subTextBase
228+
color = MiuixTheme.colorScheme.onSurfaceVariantActions
229229
)
230230
},
231231
onCheckedChange = {
@@ -324,7 +324,6 @@ fun dialog2(showDialog: MutableState<Boolean>) {
324324
TextField(
325325
modifier = Modifier.padding(bottom = 16.dp),
326326
value = value.value,
327-
backgroundColor = MiuixTheme.colorScheme.secondary,
328327
maxLines = 1,
329328
onValueChange = { value.value = it }
330329
)

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ private fun getButtonColor(enabled: Boolean, submit: Boolean): Color {
8282
return if (enabled) {
8383
if (submit) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.secondary
8484
} else {
85-
if (submit) MiuixTheme.colorScheme.disabledPrimary else MiuixTheme.colorScheme.disabledSecondary
85+
if (submit) MiuixTheme.colorScheme.disabledPrimaryButton else MiuixTheme.colorScheme.disabledSecondaryVariant
8686
}
8787
}
8888

@@ -91,6 +91,6 @@ private fun getTextColor(enabled: Boolean, submit: Boolean): Color {
9191
return if (enabled) {
9292
if (submit) Color.White else MiuixTheme.colorScheme.onBackground
9393
} else {
94-
if (submit) MiuixTheme.colorScheme.onDisabledPrimary else MiuixTheme.colorScheme.onDisabledSecondary
94+
if (submit) MiuixTheme.colorScheme.disabledOnPrimaryButton else MiuixTheme.colorScheme.disabledOnSecondaryVariant
9595
}
9696
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ fun Card(
3030
modifier: Modifier = Modifier,
3131
insideMargin: DpSize = DpSize(0.dp, 0.dp),
3232
cornerRadius: Dp = 18.dp,
33-
color: Color = MiuixTheme.colorScheme.primaryContainer,
33+
color: Color = MiuixTheme.colorScheme.surface,
3434
content: @Composable ColumnScope.() -> Unit
3535
) {
3636
val shape = remember { SquircleShape(cornerRadius) }

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import androidx.compose.ui.Alignment
2323
import androidx.compose.ui.Modifier
2424
import androidx.compose.ui.draw.clip
2525
import androidx.compose.ui.geometry.Offset
26-
import androidx.compose.ui.graphics.Color
2726
import androidx.compose.ui.graphics.Matrix
2827
import androidx.compose.ui.graphics.Path
2928
import androidx.compose.ui.graphics.PathMeasure
@@ -59,9 +58,16 @@ fun Checkbox(
5958
val backgroundColor by animateColorAsState(if (isChecked) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.secondary)
6059
val disabledBackgroundColor by rememberUpdatedState(if (isChecked) MiuixTheme.colorScheme.disabledPrimary else MiuixTheme.colorScheme.disabledSecondary)
6160
val checkboxSize by animateDpAsState(if (isPressed) 20.dp else 22.dp)
62-
val checkmarkColor by animateColorAsState(if (checked) Color.White else backgroundColor)
63-
val rotationAngle by animateFloatAsState(if (checked) 0f else 25f, animationSpec = tween(durationMillis = 200))
64-
val pathProgress by animateFloatAsState(if (checked) 1f else 0f, animationSpec = tween(durationMillis = 400))
61+
val checkmarkColor by animateColorAsState(if (checked) MiuixTheme.colorScheme.onPrimary else backgroundColor)
62+
val disabledCheckmarkColor by animateColorAsState(if (checked) MiuixTheme.colorScheme.disabledOnPrimary else disabledBackgroundColor)
63+
val rotationAngle by animateFloatAsState(
64+
if (checked) 0f else 25f,
65+
animationSpec = tween(durationMillis = 200)
66+
)
67+
val pathProgress by animateFloatAsState(
68+
if (checked) 1f else 0f,
69+
animationSpec = tween(durationMillis = 400)
70+
)
6571
val toggleableModifier = remember(onCheckedChange, isChecked, enabled) {
6672
if (onCheckedChange != null) {
6773
Modifier.toggleable(
@@ -131,7 +137,7 @@ fun Checkbox(
131137
val length = pathMeasure.length
132138
val animatedPath = Path()
133139
pathMeasure.getSegment(length * (1 - pathProgress), length, animatedPath, true)
134-
drawPath(animatedPath, checkmarkColor)
140+
drawPath(animatedPath, if (enabled) checkmarkColor else disabledCheckmarkColor)
135141
}
136142
}
137143
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,9 @@ fun BasicComponent(
4040
modifier: Modifier = Modifier,
4141
insideMargin: DpSize? = null,
4242
title: String? = null,
43-
titleColor: Color = MiuixTheme.colorScheme.onBackground,
43+
titleColor: Color = MiuixTheme.colorScheme.onSurface,
4444
summary: String? = null,
45+
summaryColor: Color = MiuixTheme.colorScheme.onSurfaceVariantSummary,
4546
leftAction: @Composable (() -> Unit?)? = null,
4647
rightActions: @Composable RowScope.() -> Unit = {},
4748
onClick: (() -> Unit)? = null,
@@ -93,7 +94,7 @@ fun BasicComponent(
9394
Text(
9495
text = it,
9596
fontSize = MiuixTheme.textStyles.title.fontSize,
96-
color = MiuixTheme.colorScheme.subTextBase
97+
color = summaryColor
9798
)
9899
}
99100
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ fun NavigationBar(
5151
items: List<NavigationItem>,
5252
selected: Int,
5353
modifier: Modifier = Modifier,
54-
color: Color = MiuixTheme.colorScheme.background,
54+
color: Color = MiuixTheme.colorScheme.surfaceContainer,
5555
onClick: (Int) -> Unit,
5656
defaultWindowInsetsPadding: Boolean = true
5757
) {
@@ -77,7 +77,7 @@ fun NavigationBar(
7777
) {
7878
HorizontalDivider(
7979
thickness = 0.25.dp,
80-
color = MiuixTheme.colorScheme.subTextBase
80+
color = MiuixTheme.colorScheme.dividerLine
8181
)
8282
Row(
8383
modifier = Modifier
@@ -91,13 +91,13 @@ fun NavigationBar(
9191
val tint by animateColorAsState(
9292
targetValue = when {
9393
isPressed -> if (isSelected) {
94-
MiuixTheme.colorScheme.onBackground.copy(alpha = 0.7f)
94+
MiuixTheme.colorScheme.onSurfaceContainer.copy(alpha = 0.6f)
9595
} else {
96-
MiuixTheme.colorScheme.subTextBase.copy(alpha = 0.7f)
96+
MiuixTheme.colorScheme.onSurfaceContainerVariant.copy(alpha = 0.6f)
9797
}
9898

99-
isSelected -> MiuixTheme.colorScheme.onBackground
100-
else -> MiuixTheme.colorScheme.subTextBase
99+
isSelected -> MiuixTheme.colorScheme.onSurfaceContainer
100+
else -> MiuixTheme.colorScheme.onSurfaceContainerVariant
101101
}
102102
)
103103
Column(

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ fun InputField(
163163
Box(
164164
modifier = Modifier
165165
.background(
166-
color = MiuixTheme.colorScheme.searchBarBg,
166+
color = MiuixTheme.colorScheme.surfaceContainerHigh,
167167
shape = SquircleShape(50.dp)
168168
)
169169
) {
@@ -182,7 +182,7 @@ fun InputField(
182182
) {
183183
Text(
184184
text = if (!(query.isNotEmpty() || expanded)) label else "",
185-
color = MiuixTheme.colorScheme.searchBarSub
185+
color = MiuixTheme.colorScheme.onSurfaceContainerHigh
186186
)
187187

188188
innerTextField()

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@ fun Slider(
6767
(round(newValue * factor) / factor).coerceIn(minValue, maxValue)
6868
}
6969
}
70-
val color = rememberUpdatedState(if (enabled) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.disabledPrimary)
71-
val backgroundColor = rememberUpdatedState(if (enabled) MiuixTheme.colorScheme.secondary else MiuixTheme.colorScheme.disabledSecondary)
70+
val color = rememberUpdatedState(if (enabled) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.disabledPrimarySlider)
71+
val backgroundColor = rememberUpdatedState(MiuixTheme.colorScheme.tertiaryContainerVariant)
7272

7373
Box(
7474
modifier = if (enabled) {

0 commit comments

Comments
 (0)