library: Refactor color scheme

composeApp/src/commonMain/kotlin/MainPage.kt

@@ -55,7 +55,7 @@ fun MainPage(
                                 modifier = Modifier.padding(horizontal = 12.dp),
                                 imageVector = MiuixIcons.Search,
                                 colorFilter = BlendModeColorFilter(
-                                    MiuixTheme.colorScheme.onPrimary,
+                                    MiuixTheme.colorScheme.onSurfaceContainer,
                                     BlendMode.SrcIn
                                 ),
                                 contentDescription = "Search"

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

@@ -16,7 +16,6 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
@@ -34,7 +33,7 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
 @Composable
 fun OtherComponent(padding: PaddingValues) {
 
-    var buttonText by remember { mutableStateOf("Button") }
+    var buttonText by remember { mutableStateOf("Cancel") }
     var submitButtonText by remember { mutableStateOf("Submit") }
     var clickCount by remember { mutableStateOf(0) }
     var submitClickCount by remember { mutableStateOf(0) }
@@ -79,15 +78,15 @@ fun OtherComponent(padding: PaddingValues) {
         Button(
             modifier = Modifier.weight(1f),
             text = "Disabled",
-            submit = true,
+            submit = false,
             enabled = false,
             onClick = {}
         )
         Spacer(Modifier.width(12.dp))
         Button(
             modifier = Modifier.weight(1f),
             text = "Disabled",
-            submit = false,
+            submit = true,
             enabled = false,
             onClick = {}
         )
@@ -104,7 +103,7 @@ fun OtherComponent(padding: PaddingValues) {
     TextField(
         value = text2,
         onValueChange = { text2 = it },
-        backgroundColor = MiuixTheme.colorScheme.primaryContainer,
+        backgroundColor = MiuixTheme.colorScheme.secondaryContainer,
         label = "Text Field",
         modifier = Modifier.padding(horizontal = 12.dp),
         keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
@@ -128,47 +127,53 @@ fun OtherComponent(padding: PaddingValues) {
         modifier = Modifier
             .fillMaxWidth()
             .padding(horizontal = 12.dp, vertical = 12.dp),
+        color = MiuixTheme.colorScheme.primaryVariant,
         insideMargin = DpSize(16.dp, 16.dp)
     ) {
-        CardView()
+        Text(
+            color = MiuixTheme.colorScheme.onPrimary,
+            text = "Card 123456789",
+            fontSize = 19.sp,
+            fontWeight = FontWeight.Bold
+        )
+        Text(
+            color = MiuixTheme.colorScheme.onPrimaryVariant,
+            text = "一二三四五六七八九",
+            fontSize = 15.sp,
+            fontWeight = FontWeight.Normal
+        )
     }
 
     Card(
         modifier = Modifier
             .fillMaxWidth()
             .padding(horizontal = 12.dp)
             .padding(bottom = 12.dp + padding.calculateBottomPadding()),
-        color = MiuixTheme.colorScheme.primary,
         insideMargin = DpSize(16.dp, 16.dp)
     ) {
-        CardView(color = Color.White)
+        val color = MiuixTheme.colorScheme.onSurface
+        Text(
+            color = color,
+            text = "Card",
+            style = MiuixTheme.textStyles.paragraph,
+            fontWeight = FontWeight.SemiBold,
+            fontSize = 16.sp
+        )
+        Spacer(Modifier.height(6.dp))
+        Text(
+            color = color,
+            text = "123456789",
+            style = MiuixTheme.textStyles.paragraph
+        )
+        Text(
+            color = color,
+            text = "一二三四五六七八九",
+            style = MiuixTheme.textStyles.paragraph
+        )
+        Text(
+            color = color,
+            text = "!@#$%^&*()_+-=",
+            style = MiuixTheme.textStyles.paragraph
+        )
     }
-
-}
-
-@Composable
-fun CardView(color: Color = MiuixTheme.colorScheme.onBackground) {
-    Text(
-        color = color,
-        text = "Card",
-        style = MiuixTheme.textStyles.paragraph,
-        fontWeight = FontWeight.SemiBold,
-        fontSize = 16.sp
-    )
-    Spacer(Modifier.height(6.dp))
-    Text(
-        color = color,
-        text = "123456789",
-        style = MiuixTheme.textStyles.paragraph
-    )
-    Text(
-        color = color,
-        text = "一二三四五六七八九",
-        style = MiuixTheme.textStyles.paragraph
-    )
-    Text(
-        color = color,
-        text = "!@#$%^&*()_+-=",
-        style = MiuixTheme.textStyles.paragraph
-    )
 }

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

@@ -185,7 +185,7 @@ fun TextComponent() {
                 Text(
                     modifier = Modifier.padding(end = 6.dp),
                     text = miuixSuperRightCheckbox,
-                    color = MiuixTheme.colorScheme.subTextBase
+                    color = MiuixTheme.colorScheme.onSurfaceVariantActions
                 )
             },
             onCheckedChange = {
@@ -225,7 +225,7 @@ fun TextComponent() {
                     Text(
                         modifier = Modifier.padding(end = 6.dp),
                         text = miuixSuperSwitch,
-                        color = MiuixTheme.colorScheme.subTextBase
+                        color = MiuixTheme.colorScheme.onSurfaceVariantActions
                     )
                 },
                 onCheckedChange = {
@@ -324,7 +324,6 @@ fun dialog2(showDialog: MutableState<Boolean>) {
                 TextField(
                     modifier = Modifier.padding(bottom = 16.dp),
                     value = value.value,
-                    backgroundColor = MiuixTheme.colorScheme.secondary,
                     maxLines = 1,
                     onValueChange = { value.value = it }
                 )

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

@@ -82,7 +82,7 @@ private fun getButtonColor(enabled: Boolean, submit: Boolean): Color {
     return if (enabled) {
         if (submit) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.secondary
     } else {
-        if (submit) MiuixTheme.colorScheme.disabledPrimary else MiuixTheme.colorScheme.disabledSecondary
+        if (submit) MiuixTheme.colorScheme.disabledPrimaryButton else MiuixTheme.colorScheme.disabledSecondaryVariant
     }
 }
 
@@ -91,6 +91,6 @@ private fun getTextColor(enabled: Boolean, submit: Boolean): Color {
     return if (enabled) {
         if (submit) Color.White else MiuixTheme.colorScheme.onBackground
     } else {
-        if (submit) MiuixTheme.colorScheme.onDisabledPrimary else MiuixTheme.colorScheme.onDisabledSecondary
+        if (submit) MiuixTheme.colorScheme.disabledOnPrimaryButton else MiuixTheme.colorScheme.disabledOnSecondaryVariant
     }
 }

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

@@ -30,7 +30,7 @@ fun Card(
     modifier: Modifier = Modifier,
     insideMargin: DpSize = DpSize(0.dp, 0.dp),
     cornerRadius: Dp = 18.dp,
-    color: Color = MiuixTheme.colorScheme.primaryContainer,
+    color: Color = MiuixTheme.colorScheme.surface,
     content: @Composable ColumnScope.() -> Unit
 ) {
     val shape = remember { SquircleShape(cornerRadius) }

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

@@ -23,7 +23,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Matrix
 import androidx.compose.ui.graphics.Path
 import androidx.compose.ui.graphics.PathMeasure
@@ -59,9 +58,16 @@ fun Checkbox(
     val backgroundColor by animateColorAsState(if (isChecked) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.secondary)
     val disabledBackgroundColor by rememberUpdatedState(if (isChecked) MiuixTheme.colorScheme.disabledPrimary else MiuixTheme.colorScheme.disabledSecondary)
     val checkboxSize by animateDpAsState(if (isPressed) 20.dp else 22.dp)
-    val checkmarkColor by animateColorAsState(if (checked) Color.White else backgroundColor)
-    val rotationAngle by animateFloatAsState(if (checked) 0f else 25f, animationSpec = tween(durationMillis = 200))
-    val pathProgress by animateFloatAsState(if (checked) 1f else 0f, animationSpec = tween(durationMillis = 400))
+    val checkmarkColor by animateColorAsState(if (checked) MiuixTheme.colorScheme.onPrimary else backgroundColor)
+    val disabledCheckmarkColor by animateColorAsState(if (checked) MiuixTheme.colorScheme.disabledOnPrimary else disabledBackgroundColor)
+    val rotationAngle by animateFloatAsState(
+        if (checked) 0f else 25f,
+        animationSpec = tween(durationMillis = 200)
+    )
+    val pathProgress by animateFloatAsState(
+        if (checked) 1f else 0f,
+        animationSpec = tween(durationMillis = 400)
+    )
     val toggleableModifier = remember(onCheckedChange, isChecked, enabled) {
         if (onCheckedChange != null) {
             Modifier.toggleable(
@@ -131,7 +137,7 @@ fun Checkbox(
                 val length = pathMeasure.length
                 val animatedPath = Path()
                 pathMeasure.getSegment(length * (1 - pathProgress), length, animatedPath, true)
-                drawPath(animatedPath, checkmarkColor)
+                drawPath(animatedPath, if (enabled) checkmarkColor else disabledCheckmarkColor)
             }
         }
     }

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

@@ -40,8 +40,9 @@ fun BasicComponent(
     modifier: Modifier = Modifier,
     insideMargin: DpSize? = null,
     title: String? = null,
-    titleColor: Color = MiuixTheme.colorScheme.onBackground,
+    titleColor: Color = MiuixTheme.colorScheme.onSurface,
     summary: String? = null,
+    summaryColor: Color = MiuixTheme.colorScheme.onSurfaceVariantSummary,
     leftAction: @Composable (() -> Unit?)? = null,
     rightActions: @Composable RowScope.() -> Unit = {},
     onClick: (() -> Unit)? = null,
@@ -93,7 +94,7 @@ fun BasicComponent(
                 Text(
                     text = it,
                     fontSize = MiuixTheme.textStyles.title.fontSize,
-                    color = MiuixTheme.colorScheme.subTextBase
+                    color = summaryColor
                 )
             }
         }

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

@@ -51,7 +51,7 @@ fun NavigationBar(
     items: List<NavigationItem>,
     selected: Int,
     modifier: Modifier = Modifier,
-    color: Color = MiuixTheme.colorScheme.background,
+    color: Color = MiuixTheme.colorScheme.surfaceContainer,
     onClick: (Int) -> Unit,
     defaultWindowInsetsPadding: Boolean = true
 ) {
@@ -77,7 +77,7 @@ fun NavigationBar(
         ) {
             HorizontalDivider(
                 thickness = 0.25.dp,
-                color = MiuixTheme.colorScheme.subTextBase
+                color = MiuixTheme.colorScheme.dividerLine
             )
             Row(
                 modifier = Modifier
@@ -91,13 +91,13 @@ fun NavigationBar(
                     val tint by animateColorAsState(
                         targetValue = when {
                             isPressed -> if (isSelected) {
-                                MiuixTheme.colorScheme.onBackground.copy(alpha = 0.7f)
+                                MiuixTheme.colorScheme.onSurfaceContainer.copy(alpha = 0.6f)
                             } else {
-                                MiuixTheme.colorScheme.subTextBase.copy(alpha = 0.7f)
+                                MiuixTheme.colorScheme.onSurfaceContainerVariant.copy(alpha = 0.6f)
                             }
 
-                            isSelected -> MiuixTheme.colorScheme.onBackground
-                            else -> MiuixTheme.colorScheme.subTextBase
+                            isSelected -> MiuixTheme.colorScheme.onSurfaceContainer
+                            else -> MiuixTheme.colorScheme.onSurfaceContainerVariant
                         }
                     )
                     Column(

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

@@ -163,7 +163,7 @@ fun InputField(
             Box(
                 modifier = Modifier
                     .background(
-                        color = MiuixTheme.colorScheme.searchBarBg,
+                        color = MiuixTheme.colorScheme.surfaceContainerHigh,
                         shape = SquircleShape(50.dp)
                     )
             ) {
@@ -182,7 +182,7 @@ fun InputField(
                     ) {
                         Text(
                             text = if (!(query.isNotEmpty() || expanded)) label else "",
-                            color = MiuixTheme.colorScheme.searchBarSub
+                            color = MiuixTheme.colorScheme.onSurfaceContainerHigh
                         )
 
                         innerTextField()

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

@@ -67,8 +67,8 @@ fun Slider(
             (round(newValue * factor) / factor).coerceIn(minValue, maxValue)
         }
     }
-    val color = rememberUpdatedState(if (enabled) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.disabledPrimary)
-    val backgroundColor = rememberUpdatedState(if (enabled) MiuixTheme.colorScheme.secondary else MiuixTheme.colorScheme.disabledSecondary)
+    val color = rememberUpdatedState(if (enabled) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.disabledPrimarySlider)
+    val backgroundColor = rememberUpdatedState(MiuixTheme.colorScheme.tertiaryContainerVariant)
 
     Box(
         modifier = if (enabled) {

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SmallTitle.kt

@@ -31,6 +31,6 @@ fun SmallTitle(
         text = text,
         fontSize = 14.sp,
         fontWeight = FontWeight.Medium,
-        color = MiuixTheme.colorScheme.smallTitle
+        color = MiuixTheme.colorScheme.onBackgroundVariant
     )
 }

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Switch.kt

@@ -23,7 +23,6 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalHapticFeedback
@@ -85,9 +84,9 @@ fun Switch(
     val disabledBackgroundColor by rememberUpdatedState(
         if (isChecked) MiuixTheme.colorScheme.disabledPrimary else MiuixTheme.colorScheme.disabledSecondary
     )
-    val thumbColor = Color.White
+    val thumbColor by rememberUpdatedState(if (isChecked) MiuixTheme.colorScheme.onPrimary else MiuixTheme.colorScheme.onSecondary)
     val disabledThumbColor by rememberUpdatedState(
-        if (isChecked) MiuixTheme.colorScheme.onDisabledPrimary else MiuixTheme.colorScheme.onDisabledSecondary
+        if (isChecked) MiuixTheme.colorScheme.disabledOnPrimary else MiuixTheme.colorScheme.disabledOnSecondary
     )
     val toggleableModifier = remember(onCheckedChange, isChecked, enabled) {
         if (onCheckedChange != null) {
@@ -150,7 +149,11 @@ fun Switch(
                     onDrag = { change, dragAmount ->
                         if (!enabled) return@detectDragGestures
                         val newOffset = dragOffset + dragAmount.x / 2
-                        dragOffset = if (isChecked) newOffset.coerceIn(-24f, 0f) else newOffset.coerceIn(0f, 24f)
+                        dragOffset =
+                            if (isChecked) newOffset.coerceIn(-24f, 0f) else newOffset.coerceIn(
+                                0f,
+                                24f
+                            )
                         if (isChecked) {
                             if (dragOffset in -23f..-1f) {
                                 hasVibrated = false
@@ -176,7 +179,10 @@ fun Switch(
                 .padding(start = thumbOffset)
                 .align(Alignment.CenterStart)
                 .size(thumbSize)
-                .background(if (enabled) thumbColor else disabledThumbColor, shape = SquircleShape(100.dp))
+                .background(
+                    if (enabled) thumbColor else disabledThumbColor,
+                    shape = SquircleShape(100.dp)
+                )
         )
     }
 }

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Text.kt

@@ -79,7 +79,7 @@ fun Text(
     onTextLayout: ((TextLayoutResult) -> Unit)? = null,
     style: TextStyle = MiuixTheme.textStyles.main
 ) {
-    val textColor by rememberUpdatedState(if (color.isSpecified) color else if (style.color.isSpecified) style.color else MiuixTheme.colorScheme.primary)
+    val textColor by rememberUpdatedState(if (color.isSpecified) color else if (style.color.isSpecified) style.color else MiuixTheme.colorScheme.onBackground)
 
     BasicText(
         text,
@@ -162,7 +162,7 @@ fun Text(
     onTextLayout: (TextLayoutResult) -> Unit = {},
     style: TextStyle = MiuixTheme.textStyles.main
 ) {
-    val textColor by rememberUpdatedState(if (color.isSpecified) color else if (style.color.isSpecified) style.color else MiuixTheme.colorScheme.primary)
+    val textColor by rememberUpdatedState(if (color.isSpecified) color else if (style.color.isSpecified) style.color else MiuixTheme.colorScheme.onBackground)
 
     BasicText(
         text = text,