composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/App.kt

@@ -20,11 +20,8 @@ package dev.krtirtho.spotube
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
-import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
-import dev.krtirtho.spotube.core.ui.base.rememberBaseUITheme
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -103,8 +100,6 @@ fun App(
     }
 
     SpotubeTheme(settings = userSettings) {
-        val baseUITheme = rememberBaseUITheme()
-        CompositionLocalProvider(LocalBaseUITheme provides baseUITheme) {
         AppShell(navigator, navigationState) {
             Column {
                 NavDisplay(
@@ -117,4 +112,3 @@ fun App(
         content()
     }
 }
-}

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/AutocompleteTextField.kt

@@ -28,8 +28,8 @@ import androidx.compose.foundation.hoverable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsFocusedAsState
 import androidx.compose.foundation.interaction.collectIsHoveredAsState
-import androidx.compose.foundation.focusable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.focusable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -41,6 +41,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
@@ -86,55 +87,12 @@ import androidx.compose.ui.window.PopupProperties
 import dev.krtirtho.spotube.resources.iconsax.Iconsax
 import dev.krtirtho.spotube.resources.iconsax.IconsaxSearchBroken
 
+private val AutocompleteTextFieldShape = RoundedCornerShape(14.dp)
+private val AutocompleteMenuShape = RoundedCornerShape(12.dp)
 private val AutocompleteTextFieldMinHeight = 44.dp
 private val AutocompleteMenuDefaultMaxHeight = 300.dp
 private val AutocompleteMenuDefaultOffset = 4.dp
 
-private data class ResolvedAutoCompleteTextFieldState(
-    val background: Brush,
-    val highlight: Color,
-    val shape: Shape,
-    val border: BaseUITheme.Border,
-    val shadow: BaseUITheme.Shadow,
-    val foreground: Color,
-)
-
-@Composable
-private fun resolveTextFieldState(
-    theme: BaseUITheme.TextFieldTheme,
-    isFocused: Boolean,
-    isHovered: Boolean,
-): ResolvedAutoCompleteTextFieldState {
-    return when {
-        isFocused -> ResolvedAutoCompleteTextFieldState(
-            theme.background.focused,
-            theme.highlight.focused,
-            theme.shape.focused,
-            theme.border.focused,
-            theme.shadow.focused,
-            theme.foreground.focused
-        )
-
-        isHovered -> ResolvedAutoCompleteTextFieldState(
-            theme.background.hovered,
-            theme.highlight.hovered,
-            theme.shape.hovered,
-            theme.border.hovered,
-            theme.shadow.hovered,
-            theme.foreground.hovered
-        )
-
-        else -> ResolvedAutoCompleteTextFieldState(
-            theme.background.pressed,
-            theme.highlight.pressed,
-            theme.shape.pressed,
-            theme.border.pressed,
-            theme.shadow.pressed,
-            theme.foreground.pressed
-        )
-    }
-}
-
 @Composable
 fun <T> AutocompleteTextField(
     value: String,
@@ -157,18 +115,16 @@ fun <T> AutocompleteTextField(
     visualTransformation: VisualTransformation = VisualTransformation.None,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     textStyle: TextStyle = TextStyle.Default,
-    cursorBrush: Color? = null,
+    cursorBrush: Color = MaterialTheme.colorScheme.primary,
     onKeyEvent: ((KeyEvent) -> Boolean)? = null,
     menuMaxHeight: Dp = AutocompleteMenuDefaultMaxHeight,
     menuOffset: Dp = AutocompleteMenuDefaultOffset,
-    textFieldTheme: BaseUITheme.TextFieldTheme? = null,
+    menuShape: Shape = AutocompleteMenuShape,
-    menuTheme: BaseUITheme.AutoCompleteMenuTheme? = null,
+    menuShadowElevation: Dp = 8.dp,
+    menuContainerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh,
 ) {
     val density = LocalDensity.current
-    val baseTextFieldTheme = LocalBaseUITheme.current.textField
+    val colors = rememberButtonColors()
-    val baseMenuTheme = LocalBaseUITheme.current.autoCompleteMenuTheme
-    val resolvedTextFieldTheme = textFieldTheme ?: baseTextFieldTheme
-    val resolvedMenuTheme = menuTheme ?: baseMenuTheme
     val isFocused by interactionSource.collectIsFocusedAsState()
     val isHovered by interactionSource.collectIsHoveredAsState()
 
@@ -218,21 +174,19 @@ fun <T> AutocompleteTextField(
         )
     }
 
-    val fieldState = resolveTextFieldState(resolvedTextFieldTheme, isFocused, isHovered)
+    val gradient = outlinedGradient(colors, false)
-
+    val border = when {
-    val resolvedBorder = if (isError) {
+        isError -> MaterialTheme.colorScheme.error
-        BaseUITheme.Border(MaterialTheme.colorScheme.error, fieldState.border.width)
+        isFocused -> MaterialTheme.colorScheme.primary
-    } else {
+        isHovered -> colors.border.copy(alpha = 0.85f)
-        fieldState.border
+        else -> colors.border
     }
 
     val contentColor = when {
-        !enabled -> fieldState.foreground.copy(alpha = 0.38f)
+        !enabled -> colors.onContainer.copy(alpha = 0.38f)
-        else -> fieldState.foreground
+        else -> colors.onContainer
     }
 
-    val cursor = cursorBrush?.let { SolidColor(it) } ?: resolvedTextFieldTheme.cursor
-
     fun navigate(delta: Int) {
         if (items.isEmpty()) return
         selectedIndex = ((selectedIndex + delta) % items.size + items.size) % items.size
@@ -253,25 +207,13 @@ fun <T> AutocompleteTextField(
                     .fillMaxWidth()
                     .onSizeChanged { textFieldSize = it }
                     .defaultMinSize(minHeight = AutocompleteTextFieldMinHeight)
-                    .then(
+                    .then(textFieldShadow(AutocompleteTextFieldShape, isFocused, colors))
-                        if (fieldState.shadow.elevation > 0.dp) {
+                    .clip(AutocompleteTextFieldShape)
-                            Modifier.shadow(
+                    .background(gradient, AutocompleteTextFieldShape)
-                                elevation = fieldState.shadow.elevation,
+                    .border(BorderStroke(.5.dp, border), AutocompleteTextFieldShape)
-                                shape = fieldState.shape,
-                                ambientColor = fieldState.shadow.ambientColor,
-                                spotColor = fieldState.shadow.spotColor,
-                            )
-                        } else Modifier
-                    )
-                    .clip(fieldState.shape)
-                    .background(fieldState.background, fieldState.shape)
-                    .border(
-                        BorderStroke(resolvedBorder.width, resolvedBorder.color),
-                        fieldState.shape
-                    )
                     .drawWithCache {
                         val highlightBrush = Brush.verticalGradient(
-                            colors = listOf(fieldState.highlight, Color.Transparent),
+                            colors = listOf(colors.highlight, Color.Transparent),
                             startY = 0f,
                             endY = size.height * 0.5f,
                         )
@@ -284,7 +226,7 @@ fun <T> AutocompleteTextField(
                             )
                         }
                     }
-                    .padding(resolvedTextFieldTheme.padding),
+                    .padding(horizontal = 14.dp, vertical = 10.dp),
             ) {
                 Row(
                     verticalAlignment = Alignment.CenterVertically,
@@ -352,7 +294,7 @@ fun <T> AutocompleteTextField(
                             enabled = enabled,
                             readOnly = readOnly,
                             textStyle = textStyle.copy(color = contentColor),
-                            cursorBrush = cursor,
+                            cursorBrush = SolidColor(cursorBrush),
                             keyboardOptions = keyboardOptions,
                             keyboardActions = wrappedKeyboardActions,
                             singleLine = singleLine,
@@ -398,9 +340,9 @@ fun <T> AutocompleteTextField(
                     modifier = Modifier
                         .width(textFieldWidthDp)
                         .heightIn(max = menuMaxHeight)
-                        .shadow(resolvedMenuTheme.shadowElevation, resolvedMenuTheme.shape)
+                        .shadow(menuShadowElevation, menuShape)
-                        .background(resolvedMenuTheme.background, resolvedMenuTheme.shape)
+                        .background(menuContainerColor, menuShape)
-                        .clip(resolvedMenuTheme.shape)
+                        .clip(menuShape)
                         .focusRequester(popupFocusRequester)
                         .focusable()
                         .onFocusChanged { state ->
@@ -470,8 +412,6 @@ fun <T> AutocompleteTextField(
 @Composable
 private fun AutocompleteTextFieldPreview() {
     MaterialTheme {
-        val theme = rememberBaseUITheme()
-        CompositionLocalProvider(LocalBaseUITheme provides theme) {
         androidx.compose.material3.Surface(
             color = MaterialTheme.colorScheme.background,
             modifier = Modifier.padding(24.dp),
@@ -539,4 +479,3 @@ private fun AutocompleteTextFieldPreview() {
         }
     }
 }
-}

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Buttons.kt

@@ -44,6 +44,7 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -53,8 +54,8 @@ import androidx.compose.ui.draw.drawWithCache
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -70,45 +71,163 @@ import dev.krtirtho.spotube.resources.iconsax.IconsaxNext
 import dev.krtirtho.spotube.resources.iconsax.IconsaxShare
 import dev.krtirtho.spotube.resources.iconsax.User
 
+private val ButtonShape = RoundedCornerShape(14.dp)
+private val GroupShape = RoundedCornerShape(14.dp)
 private val BadgeShape = RoundedCornerShape(11.dp)
 private val ButtonMinHeight = 40.dp
 private val SquareButtonSize = 40.dp
 
-private data class ResolvedButtonState(
+@Immutable
-    val colors: BaseUITheme.ButtonColors,
+data class ButtonColors(
-    val shape: Shape,
+    val containerLighter: Color,
-    val shadow: BaseUITheme.Shadow,
+    val containerDarker: Color,
-    val border: BaseUITheme.Border,
+    val containerPressed: Color,
-    val padding: PaddingValues,
+    val onContainer: Color,
+    val border: Color,
+    val accent: Color,
+    val onAccent: Color,
+    val secondaryContainer: Color,
+    val onSecondaryContainer: Color,
+    val secondaryContainerPressed: Color,
+    val secondaryHighlight: Color,
+    val shadow: Color,
+    val highlight: Color,
 )
 
 @Composable
-private fun resolveButtonState(
+fun rememberButtonColors(): ButtonColors {
-    style: BaseUITheme.ButtonStyle,
+    val scheme = MaterialTheme.colorScheme
-    isPressed: Boolean,
+    val isLight = scheme.surface.luminance() > 0.5f
-    isHovered: Boolean,
+
-): ResolvedButtonState {
+    return remember(scheme) {
-    return when {
+        ButtonColors(
-        isPressed -> ResolvedButtonState(style.colors.pressed, style.shape.pressed, style.shadow.pressed, style.border.pressed, style.padding.pressed)
+            containerLighter = if (isLight) {
-        isHovered -> ResolvedButtonState(style.colors.hovered, style.shape.hovered, style.shadow.hovered, style.border.hovered, style.padding.hovered)
+                Color.White
-        else -> ResolvedButtonState(style.colors.focused, style.shape.focused, style.shadow.focused, style.border.focused, style.padding.focused)
+            } else {
+                scheme.surfaceContainerHigh
+            },
+            containerDarker = if (isLight) {
+                Color(0xFFF2F2F4)
+            } else {
+                scheme.surfaceContainer
+            },
+            containerPressed = if (isLight) {
+                Color(0xFFE0E0E3)
+            } else {
+                scheme.surfaceContainerHighest
+            },
+            onContainer = scheme.onSurface,
+            border = scheme.outlineVariant,
+            accent = scheme.primary,
+            onAccent = scheme.onPrimary,
+            secondaryContainer = scheme.secondaryContainer,
+            onSecondaryContainer = scheme.onSecondaryContainer,
+            secondaryContainerPressed = scheme.secondaryContainer.copy(
+                alpha = if (isLight) 0.85f else 0.92f
+            ),
+            secondaryHighlight = if (isLight) {
+                Color.White.copy(alpha = 0.5f)
+            } else {
+                Color.White.copy(alpha = 0.08f)
+            },
+            shadow = scheme.onSurface.copy(alpha = 0.12f),
+            highlight = if (isLight) {
+                Color.White.copy(alpha = 0.9f)
+            } else {
+                Color.White.copy(alpha = 0.06f)
+            },
+        )
     }
 }
 
-private fun Modifier.applyShadow(
+@Composable
-    shadow: BaseUITheme.Shadow,
+fun outlinedGradient(colors: ButtonColors, pressed: Boolean): Brush {
-    shape: Shape,
+    val top = if (pressed) colors.containerPressed else colors.containerLighter
+    val bottom = if (pressed) colors.containerPressed else colors.containerDarker
+    return remember(colors, pressed) { Brush.verticalGradient(listOf(top, bottom)) }
+}
+
+@Composable
+fun primaryGradient(colors: ButtonColors, pressed: Boolean): Brush {
+    val alpha = if (pressed) 0.85f else 1f
+    return remember(colors, pressed) {
+        Brush.verticalGradient(
+            listOf(colors.accent.copy(alpha = alpha), colors.accent)
+        )
+    }
+}
+
+@Composable
+private fun secondaryGradient(colors: ButtonColors, pressed: Boolean): Brush {
+    val top = if (pressed) colors.secondaryContainerPressed else colors.secondaryContainer
+    val bottom = if (pressed) {
+        colors.secondaryContainerPressed
+    } else {
+        colors.secondaryContainer.copy(
+            alpha = if (top.luminance() > 0.5f) 0.92f else 1f
+        )
+    }
+    return remember(colors, pressed) { Brush.verticalGradient(listOf(top, bottom)) }
+}
+
+@Composable
+private fun badgeGradient(colors: ButtonColors): Brush = remember(colors) {
+    Brush.verticalGradient(listOf(colors.containerLighter, colors.containerDarker))
+}
+
+@Composable
+internal fun buttonShadow(
+    shape: androidx.compose.ui.graphics.Shape,
+    pressed: Boolean,
+    primary: Boolean,
+    colors: ButtonColors,
+    hovered: Boolean = false,
 ): Modifier {
-    return if (shadow.elevation > 0.dp) {
+    val elevation = when {
-        this.shadow(
+        pressed -> 1.dp
-            elevation = shadow.elevation,
+        hovered -> 9.dp
-            shape = shape,
+        else -> 6.dp
-            ambientColor = shadow.ambientColor,
+    }
-            spotColor = shadow.spotColor,
+    val ambient = if (primary) {
+        colors.accent.copy(
+            alpha = when {
+                pressed -> 0.2f
+                hovered -> 0.45f
+                else -> 0.35f
+            }
         )
     } else {
-        this
+        colors.shadow.copy(
+            alpha = when {
+                pressed -> 0.08f
+                hovered -> 0.22f
+                else -> 0.15f
             }
+        )
+    }
+    val spot = if (primary) {
+        colors.accent.copy(
+            alpha = when {
+                pressed -> 0.25f
+                hovered -> 0.5f
+                else -> 0.4f
+            }
+        )
+    } else {
+        colors.shadow.copy(
+            alpha = when {
+                pressed -> 0.1f
+                hovered -> 0.26f
+                else -> 0.18f
+            }
+        )
+    }
+    return Modifier.shadow(
+        elevation = elevation,
+        shape = shape,
+        ambientColor = ambient,
+        spotColor = spot,
+    )
 }
 
 @Composable
@@ -116,16 +235,18 @@ fun OutlineButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
+    shape: androidx.compose.ui.graphics.Shape = ButtonShape,
+    contentPadding: PaddingValues = PaddingValues(horizontal = 20.dp, vertical = 10.dp),
     hoverOnly: Boolean = false,
-    theme: BaseUITheme.ButtonStyle? = null,
+    colors: ButtonColors? = null,
     content: @Composable RowScope.() -> Unit,
 ) {
-    val baseTheme = LocalBaseUITheme.current
+    val colors = colors ?: rememberButtonColors()
-    val style = theme ?: baseTheme.buttons.outline
     val interactionSource = remember { MutableInteractionSource() }
     val isPressed by interactionSource.collectIsPressedAsState()
     val isHovered by interactionSource.collectIsHoveredAsState()
-    val state = resolveButtonState(style, isPressed, isHovered)
+    val gradient = outlinedGradient(colors, isPressed)
+    val border = colors.border.copy(alpha = if (isPressed) 0.7f else 1f)
     val lift = if (isHovered && !isPressed) (-1).dp else 0.dp
 
     Box(
@@ -134,12 +255,18 @@ fun OutlineButton(
             .hoverable(interactionSource = interactionSource, enabled = enabled)
             .graphicsLayer { translationY = lift.toPx() }
             .then(
-                if (hoverOnly && !isHovered) Modifier else Modifier.applyShadow(state.shadow, state.shape)
+                if (hoverOnly && !isHovered) Modifier else buttonShadow(
+                    shape,
+                    isPressed,
+                    primary = false,
+                    colors,
+                    hovered = isHovered
                 )
-            .clip(state.shape)
+            )
+            .clip(shape)
             .then(
-                if (hoverOnly && !isHovered) Modifier else Modifier.background(state.colors.background, state.shape)
+                if (hoverOnly && !isHovered) Modifier else Modifier.background(gradient, shape)
-                    .border(BorderStroke(state.border.width, state.border.color), state.shape)
+                    .border(BorderStroke(0.5.dp, border), shape)
             )
             .clickable(
                 enabled = enabled,
@@ -149,7 +276,7 @@ fun OutlineButton(
             )
             .then(if (hoverOnly && !isHovered) Modifier else Modifier.drawWithCache {
                 val highlightBrush = Brush.verticalGradient(
-                    colors = listOf(state.colors.highlight, Color.Transparent),
+                    colors = listOf(colors.highlight, Color.Transparent),
                     startY = 0f,
                     endY = size.height * 0.5f,
                 )
@@ -162,17 +289,13 @@ fun OutlineButton(
                     )
                 }
             })
-            .padding(state.padding),
+            .padding(contentPadding),
         contentAlignment = Alignment.Center,
     ) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(8.dp),
-            content = {
+            content = content,
-                CompositionLocalProvider(LocalContentColor provides state.colors.foreground) {
-                    content()
-                }
-            },
         )
     }
 }
@@ -182,15 +305,16 @@ fun PrimaryButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    theme: BaseUITheme.ButtonStyle? = null,
+    shape: androidx.compose.ui.graphics.Shape = ButtonShape,
+    contentPadding: PaddingValues = PaddingValues(horizontal = 20.dp, vertical = 10.dp),
+    colors: ButtonColors? = null,
     content: @Composable RowScope.() -> Unit,
 ) {
-    val baseTheme = LocalBaseUITheme.current
+    val colors = colors ?: rememberButtonColors()
-    val style = theme ?: baseTheme.buttons.primary
     val interactionSource = remember { MutableInteractionSource() }
     val isPressed by interactionSource.collectIsPressedAsState()
     val isHovered by interactionSource.collectIsHoveredAsState()
-    val state = resolveButtonState(style, isPressed, isHovered)
+    val gradient = primaryGradient(colors, isPressed)
     val lift = if (isHovered && !isPressed) (-1).dp else 0.dp
 
     Box(
@@ -198,10 +322,10 @@ fun PrimaryButton(
             .defaultMinSize(minHeight = ButtonMinHeight)
             .hoverable(interactionSource = interactionSource, enabled = enabled)
             .graphicsLayer { translationY = lift.toPx() }
-            .applyShadow(state.shadow, state.shape)
+            .then(buttonShadow(shape, isPressed, primary = true, colors, hovered = isHovered))
-            .clip(state.shape)
+            .clip(shape)
-            .background(state.colors.background, state.shape)
+            .background(gradient, shape)
-            .border(BorderStroke(state.border.width, state.border.color), state.shape)
+            .border(BorderStroke(0.5.dp, colors.accent), shape)
             .clickable(
                 enabled = enabled,
                 interactionSource = interactionSource,
@@ -210,7 +334,7 @@ fun PrimaryButton(
             )
             .drawWithCache {
                 val highlightBrush = Brush.verticalGradient(
-                    colors = listOf(state.colors.highlight, Color.Transparent),
+                    colors = listOf(Color.White.copy(alpha = 0.25f), Color.Transparent),
                     startY = 0f,
                     endY = size.height * 0.5f,
                 )
@@ -223,10 +347,10 @@ fun PrimaryButton(
                     )
                 }
             }
-            .padding(state.padding),
+            .padding(contentPadding),
         contentAlignment = Alignment.Center,
     ) {
-        CompositionLocalProvider(LocalContentColor provides state.colors.foreground) {
+        CompositionLocalProvider(LocalContentColor provides colors.onAccent) {
             Row(
                 verticalAlignment = Alignment.CenterVertically,
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
@@ -241,15 +365,16 @@ fun SecondaryButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    theme: BaseUITheme.ButtonStyle? = null,
+    shape: androidx.compose.ui.graphics.Shape = ButtonShape,
+    contentPadding: PaddingValues = PaddingValues(horizontal = 20.dp, vertical = 10.dp),
+    colors: ButtonColors? = null,
     content: @Composable RowScope.() -> Unit,
 ) {
-    val baseTheme = LocalBaseUITheme.current
+    val colors = colors ?: rememberButtonColors()
-    val style = theme ?: baseTheme.buttons.secondary
     val interactionSource = remember { MutableInteractionSource() }
     val isPressed by interactionSource.collectIsPressedAsState()
     val isHovered by interactionSource.collectIsHoveredAsState()
-    val state = resolveButtonState(style, isPressed, isHovered)
+    val gradient = secondaryGradient(colors, isPressed)
     val lift = if (isHovered && !isPressed) (-1).dp else 0.dp
 
     Box(
@@ -257,10 +382,13 @@ fun SecondaryButton(
             .defaultMinSize(minHeight = ButtonMinHeight)
             .hoverable(interactionSource = interactionSource, enabled = enabled)
             .graphicsLayer { translationY = lift.toPx() }
-            .applyShadow(state.shadow, state.shape)
+            .then(buttonShadow(shape, isPressed, primary = false, colors, hovered = isHovered))
-            .clip(state.shape)
+            .clip(shape)
-            .background(state.colors.background, state.shape)
+            .background(gradient, shape)
-            .border(BorderStroke(state.border.width, state.border.color), state.shape)
+            .border(
+                BorderStroke(0.5.dp, colors.secondaryContainer.copy(alpha = 0.5f)),
+                shape,
+            )
             .clickable(
                 enabled = enabled,
                 interactionSource = interactionSource,
@@ -269,7 +397,7 @@ fun SecondaryButton(
             )
             .drawWithCache {
                 val highlightBrush = Brush.verticalGradient(
-                    colors = listOf(state.colors.highlight, Color.Transparent),
+                    colors = listOf(colors.secondaryHighlight, Color.Transparent),
                     startY = 0f,
                     endY = size.height * 0.5f,
                 )
@@ -282,10 +410,10 @@ fun SecondaryButton(
                     )
                 }
             }
-            .padding(state.padding),
+            .padding(contentPadding),
         contentAlignment = Alignment.Center,
     ) {
-        CompositionLocalProvider(LocalContentColor provides state.colors.foreground) {
+        CompositionLocalProvider(LocalContentColor provides colors.onSecondaryContainer) {
             Row(
                 verticalAlignment = Alignment.CenterVertically,
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
@@ -300,60 +428,40 @@ fun IconButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    theme: BaseUITheme.ButtonStyle? = null,
+    shape: androidx.compose.ui.graphics.Shape = ButtonShape,
+    colors: ButtonColors? = null,
     content: @Composable () -> Unit,
 ) {
-    val baseTheme = LocalBaseUITheme.current
-    val style = theme ?: baseTheme.iconButtons.outline
     OutlineButton(
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
-        theme = style,
+        shape = shape,
+        contentPadding = PaddingValues(8.dp),
+        colors = colors,
     ) {
         content()
     }
 }
 
 @Composable
+
 fun GhostIconButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    theme: BaseUITheme.ButtonStyle? = null,
+    shape: androidx.compose.ui.graphics.Shape = ButtonShape,
+    colors: ButtonColors? = null,
     content: @Composable () -> Unit,
 ) {
-    val baseTheme = LocalBaseUITheme.current
-    val outlineStyle = baseTheme.iconButtons.outline
-    val ghostStyle = theme ?: BaseUITheme.ButtonStyle(
-        colors = BaseUITheme.InteractionState(
-            hovered = outlineStyle.colors.hovered,
-            pressed = outlineStyle.colors.pressed,
-            focused = BaseUITheme.ButtonColors(
-                background = Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent)),
-                foreground = outlineStyle.colors.focused.foreground,
-                highlight = outlineStyle.colors.focused.highlight,
-            ),
-        ),
-        shape = outlineStyle.shape,
-        shadow = BaseUITheme.InteractionState(
-            hovered = outlineStyle.shadow.hovered,
-            pressed = outlineStyle.shadow.pressed,
-            focused = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent),
-        ),
-        border = BaseUITheme.InteractionState(
-            hovered = outlineStyle.border.hovered,
-            pressed = outlineStyle.border.pressed,
-            focused = BaseUITheme.Border(Color.Transparent, 0.dp),
-        ),
-        padding = outlineStyle.padding,
-    )
     OutlineButton(
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
+        shape = shape,
+        contentPadding = PaddingValues(8.dp),
         hoverOnly = true,
-        theme = ghostStyle,
+        colors = colors,
     ) {
         content()
     }
@@ -364,16 +472,17 @@ fun PrimaryIconButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    theme: BaseUITheme.ButtonStyle? = null,
+    shape: androidx.compose.ui.graphics.Shape = ButtonShape,
+    colors: ButtonColors? = null,
     content: @Composable () -> Unit,
 ) {
-    val baseTheme = LocalBaseUITheme.current
-    val style = theme ?: baseTheme.iconButtons.primary
     PrimaryButton(
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
-        theme = style,
+        shape = shape,
+        contentPadding = PaddingValues(8.dp),
+        colors = colors,
     ) {
         content()
     }
@@ -384,16 +493,17 @@ fun SecondaryIconButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    theme: BaseUITheme.ButtonStyle? = null,
+    shape: androidx.compose.ui.graphics.Shape = ButtonShape,
+    colors: ButtonColors? = null,
     content: @Composable () -> Unit,
 ) {
-    val baseTheme = LocalBaseUITheme.current
-    val style = theme ?: baseTheme.iconButtons.secondary
     SecondaryButton(
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
-        theme = style,
+        shape = shape,
+        contentPadding = PaddingValues(8.dp),
+        colors = colors,
     ) {
         content()
     }
@@ -403,17 +513,15 @@ fun SecondaryIconButton(
 fun ButtonBadge(
     count: Int,
     modifier: Modifier = Modifier,
-    theme: BaseUITheme.ButtonStyle? = null,
+    colors: ButtonColors? = null,
 ) {
-    val baseTheme = LocalBaseUITheme.current
+    val colors = colors ?: rememberButtonColors()
-    val style = theme ?: baseTheme.buttons.outline
-    val state = resolveButtonState(style, isPressed = false, isHovered = false)
     Box(
         modifier = modifier
             .heightIn(min = 22.dp)
             .defaultMinSize(minWidth = 22.dp)
-            .background(state.colors.background, BadgeShape)
+            .background(badgeGradient(colors), BadgeShape)
-            .border(1.dp, state.border.color, BadgeShape)
+            .border(1.dp, colors.border, BadgeShape)
             .padding(horizontal = 7.dp),
         contentAlignment = Alignment.Center,
     ) {
@@ -423,7 +531,7 @@ fun ButtonBadge(
             fontWeight = androidx.compose.ui.text.font.FontWeight.SemiBold,
             maxLines = 1,
             softWrap = false,
-            color = state.colors.foreground.copy(alpha = 0.7f),
+            color = colors.onContainer.copy(alpha = 0.7f),
         )
     }
 }
@@ -433,19 +541,18 @@ fun GroupButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    theme: BaseUITheme.ButtonStyle? = null,
+    contentPadding: PaddingValues = PaddingValues(horizontal = 14.dp, vertical = 11.dp),
+    colors: ButtonColors? = null,
     content: @Composable RowScope.() -> Unit,
 ) {
-    val baseTheme = LocalBaseUITheme.current
+    val colors = colors ?: rememberButtonColors()
-    val style = theme ?: baseTheme.buttons.outline
     val interactionSource = remember { MutableInteractionSource() }
     val isPressed by interactionSource.collectIsPressedAsState()
     val isHovered by interactionSource.collectIsHoveredAsState()
-    val state = resolveButtonState(style, isPressed, isHovered)
     val overlay = when {
-        isPressed -> state.colors.background
+        isPressed -> colors.containerPressed
-        isHovered -> state.colors.background
+        isHovered -> colors.containerPressed.copy(alpha = 0.5f)
-        else -> Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent))
+        else -> Color.Transparent
     }
     val lift = if (isHovered && !isPressed) (-1).dp else 0.dp
 
@@ -461,7 +568,7 @@ fun GroupButton(
                 indication = ripple(),
                 onClick = onClick,
             )
-            .padding(state.padding),
+            .padding(contentPadding),
         contentAlignment = Alignment.Center,
     ) {
         Row(
@@ -477,19 +584,17 @@ fun GroupIconButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    theme: BaseUITheme.ButtonStyle? = null,
+    colors: ButtonColors? = null,
     content: @Composable () -> Unit,
 ) {
-    val baseTheme = LocalBaseUITheme.current
+    val colors = colors ?: rememberButtonColors()
-    val style = theme ?: baseTheme.buttons.outline
     val interactionSource = remember { MutableInteractionSource() }
     val isPressed by interactionSource.collectIsPressedAsState()
     val isHovered by interactionSource.collectIsHoveredAsState()
-    val state = resolveButtonState(style, isPressed, isHovered)
     val overlay = when {
-        isPressed -> state.colors.background
+        isPressed -> colors.containerPressed
-        isHovered -> state.colors.background
+        isHovered -> colors.containerPressed.copy(alpha = 0.5f)
-        else -> Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent))
+        else -> Color.Transparent
     }
     val lift = if (isHovered && !isPressed) (-1).dp else 0.dp
 
@@ -514,23 +619,28 @@ fun GroupIconButton(
 @Composable
 fun ButtonGroup(
     modifier: Modifier = Modifier,
-    theme: BaseUITheme.ButtonStyle? = null,
+    colors: ButtonColors? = null,
     content: @Composable () -> Unit,
 ) {
-    val baseTheme = LocalBaseUITheme.current
+    val colors = colors ?: rememberButtonColors()
-    val style = theme ?: baseTheme.buttons.outline
-    val state = resolveButtonState(style, isPressed = false, isHovered = false)
-    val groupShape = state.shape
     Surface(
         modifier = modifier
             .defaultMinSize(minHeight = ButtonMinHeight)
-            .applyShadow(state.shadow, groupShape),
+            .then(
-        shape = groupShape,
+                buttonShadow(
+                    GroupShape,
+                    pressed = false,
+                    primary = false,
+                    colors,
+                    hovered = false
+                )
+            ),
+        shape = GroupShape,
         color = Color.Transparent,
-        border = BorderStroke(state.border.width, state.border.color),
+        border = BorderStroke(0.5.dp, colors.border),
     ) {
         Box(
-            modifier = Modifier.background(state.colors.background, groupShape),
+            modifier = Modifier.background(outlinedGradient(colors, false), GroupShape),
         ) {
             Row(verticalAlignment = Alignment.CenterVertically) {
                 content()
@@ -541,16 +651,14 @@ fun ButtonGroup(
 
 @Composable
 fun ButtonGroupDivider(
-    theme: BaseUITheme.ButtonStyle? = null,
+    colors: ButtonColors? = null,
 ) {
-    val baseTheme = LocalBaseUITheme.current
+    val colors = colors ?: rememberButtonColors()
-    val style = theme ?: baseTheme.buttons.outline
-    val state = resolveButtonState(style, isPressed = false, isHovered = false)
     Box(
         modifier = Modifier
             .width(1.dp)
             .heightIn(min = 20.dp)
-            .background(state.border.color),
+            .background(colors.border),
     )
 }
 
@@ -558,8 +666,6 @@ fun ButtonGroupDivider(
 @Composable
 private fun ButtonsRow1Preview() {
     MaterialTheme {
-        val theme = rememberBaseUITheme()
-        CompositionLocalProvider(LocalBaseUITheme provides theme) {
         Surface(
             color = MaterialTheme.colorScheme.background,
             modifier = Modifier.padding(24.dp),
@@ -605,14 +711,11 @@ private fun ButtonsRow1Preview() {
         }
     }
 }
-}
 
 @Preview(showBackground = true)
 @Composable
 private fun ButtonsRow2Preview() {
     MaterialTheme {
-        val theme = rememberBaseUITheme()
-        CompositionLocalProvider(LocalBaseUITheme provides theme) {
         Surface(
             color = MaterialTheme.colorScheme.background,
             modifier = Modifier.padding(24.dp),
@@ -669,14 +772,11 @@ private fun ButtonsRow2Preview() {
         }
     }
 }
-}
 
 @Preview(showBackground = true)
 @Composable
 private fun ButtonsRow3Preview() {
     MaterialTheme {
-        val theme = rememberBaseUITheme()
-        CompositionLocalProvider(LocalBaseUITheme provides theme) {
         Surface(
             color = MaterialTheme.colorScheme.background,
             modifier = Modifier.padding(24.dp),
@@ -716,14 +816,11 @@ private fun ButtonsRow3Preview() {
         }
     }
 }
-}
 
 @Preview(showBackground = true)
 @Composable
 private fun ButtonsRow4Preview() {
     MaterialTheme {
-        val theme = rememberBaseUITheme()
-        CompositionLocalProvider(LocalBaseUITheme provides theme) {
         Surface(
             color = MaterialTheme.colorScheme.background,
             modifier = Modifier.padding(24.dp),
@@ -761,14 +858,11 @@ private fun ButtonsRow4Preview() {
         }
     }
 }
-}
 
 @Preview(showBackground = true)
 @Composable
 private fun ButtonStylesPreview() {
     MaterialTheme {
-        val theme = rememberBaseUITheme()
-        CompositionLocalProvider(LocalBaseUITheme provides theme) {
         Surface(
             color = MaterialTheme.colorScheme.background,
             modifier = Modifier.padding(24.dp),
@@ -795,7 +889,6 @@ private fun ButtonStylesPreview() {
         }
     }
 }
-}
 
 enum class VariableIconButtonVariant {
     Outline,
@@ -810,7 +903,8 @@ fun VariableIconButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    theme: BaseUITheme.ButtonStyle? = null,
+    shape: androidx.compose.ui.graphics.Shape = ButtonShape,
+    colors: ButtonColors? = null,
     content: @Composable () -> Unit,
 ) {
     when (variant) {
@@ -818,7 +912,8 @@ fun VariableIconButton(
             onClick = onClick,
             modifier = modifier,
             enabled = enabled,
-            theme = theme,
+            shape = shape,
+            colors = colors,
             content = content,
         )
 
@@ -826,7 +921,8 @@ fun VariableIconButton(
             onClick = onClick,
             modifier = modifier,
             enabled = enabled,
-            theme = theme,
+            shape = shape,
+            colors = colors,
             content = content,
         )
 
@@ -834,7 +930,8 @@ fun VariableIconButton(
             onClick = onClick,
             modifier = modifier,
             enabled = enabled,
-            theme = theme,
+            shape = shape,
+            colors = colors,
             content = content,
         )
 
@@ -842,7 +939,8 @@ fun VariableIconButton(
             onClick = onClick,
             modifier = modifier,
             enabled = enabled,
-            theme = theme,
+            shape = shape,
+            colors = colors,
             content = content,
         )
     }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Card.kt

@@ -1,81 +0,0 @@
-/*
- * Copyright (C) 2026 Kingkor Roy Tirtho and Spotube Contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package dev.krtirtho.spotube.core.ui.base
-
-import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.unit.dp
-
-@Composable
-fun Card(
-    modifier: Modifier = Modifier,
-    theme: BaseUITheme.CardTheme? = null,
-    content: @Composable () -> Unit,
-) {
-    val cardTheme = theme ?: LocalBaseUITheme.current.card
-
-    Box(
-        modifier = modifier
-            .then(
-                if (cardTheme.shadow.elevation > 0.dp) {
-                    Modifier.shadow(
-                        elevation = cardTheme.shadow.elevation,
-                        shape = cardTheme.shape,
-                        ambientColor = cardTheme.shadow.ambientColor,
-                        spotColor = cardTheme.shadow.spotColor,
-                    )
-                } else Modifier
-            )
-            .clip(cardTheme.shape)
-            .background(cardTheme.background, cardTheme.shape)
-            .border(BorderStroke(cardTheme.border.width, cardTheme.border.color), cardTheme.shape)
-            .padding(cardTheme.padding),
-    ) {
-        content()
-    }
-}
-
-@Composable
-@androidx.compose.ui.tooling.preview.Preview
-private fun CardPreview() {
-    MaterialTheme {
-        val theme = rememberBaseUITheme()
-        CompositionLocalProvider(LocalBaseUITheme provides theme) {
-            Surface(
-                color = MaterialTheme.colorScheme.background,
-                modifier = Modifier.padding(24.dp),
-            ) {
-                Card {
-                    Box(modifier = Modifier.padding(16.dp))
-                }
-            }
-        }
-    }
-}

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/CheckBox.kt

@@ -39,7 +39,6 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -51,7 +50,6 @@ import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Path
-import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.graphics.StrokeJoin
 import androidx.compose.ui.graphics.drawscope.Stroke
@@ -67,28 +65,9 @@ enum class CheckBoxState {
     CLEAR;
 }
 
+private val CheckBoxShape = RoundedCornerShape(6.dp)
 private val CheckBoxSize = 22.dp
 
-private data class ResolvedCheckBoxState(
-    val colors: BaseUITheme.ButtonColors,
-    val shape: Shape,
-    val shadow: BaseUITheme.Shadow,
-    val border: BaseUITheme.Border,
-)
-
-@Composable
-private fun resolveCheckBoxState(
-    style: BaseUITheme.ButtonStyle,
-    isPressed: Boolean,
-    isHovered: Boolean,
-): ResolvedCheckBoxState {
-    return when {
-        isPressed -> ResolvedCheckBoxState(style.colors.pressed, style.shape.pressed, style.shadow.pressed, style.border.pressed)
-        isHovered -> ResolvedCheckBoxState(style.colors.hovered, style.shape.hovered, style.shadow.hovered, style.border.hovered)
-        else -> ResolvedCheckBoxState(style.colors.focused, style.shape.focused, style.shadow.focused, style.border.focused)
-    }
-}
-
 @Composable
 fun CheckBox(
     state: CheckBoxState = CheckBoxState.UNSELECTED,
@@ -96,25 +75,69 @@ fun CheckBox(
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
     interactionSource: MutableInteractionSource? = null,
-    theme: BaseUITheme.CheckBoxTheme? = null,
 ) {
-    val baseTheme = LocalBaseUITheme.current.checkBox
+    val colors = rememberButtonColors()
-    val checkBoxTheme = theme ?: baseTheme
     val source = interactionSource ?: remember { MutableInteractionSource() }
     val isPressed by source.collectIsPressedAsState()
     val isHovered by source.collectIsHoveredAsState()
+    val lift = if (isHovered && !isPressed && onClick != null) (-1).dp else 0.dp
 
     val isSelected = state == CheckBoxState.SELECTED
     val isIndeterminate = state == CheckBoxState.INDETERMINATE
     val isFilled = isSelected || isIndeterminate
 
-    val style = if (isFilled) checkBoxTheme.selected else checkBoxTheme.unselected
+    val backgroundBrush = if (isFilled) {
-    val resolved = resolveCheckBoxState(style, isPressed, isHovered)
+        primaryGradient(colors, isPressed)
-    val lift = if (isHovered && !isPressed && onClick != null) (-1).dp else 0.dp
+    } else {
-
+        outlinedGradient(colors, false)
+    }
     val borderColor = when {
-        !enabled -> resolved.colors.foreground.copy(alpha = 0.38f)
+        !enabled -> colors.onContainer.copy(alpha = 0.38f)
-        else -> resolved.border.color
+        isFilled -> colors.accent
+        else -> colors.border
+    }
+    val borderWidth = 0.5.dp
+
+    val shadowElevation = when {
+        isPressed -> 1.dp
+        isFilled && isHovered -> 8.dp
+        isFilled -> 6.dp
+        isHovered -> 5.dp
+        else -> 3.dp
+    }
+    val shadowAmbient = if (isFilled) {
+        colors.accent.copy(
+            alpha = when {
+                isPressed -> 0.2f
+                isHovered -> 0.4f
+                else -> 0.3f
+            }
+        )
+    } else {
+        colors.shadow.copy(
+            alpha = when {
+                isPressed -> 0.08f
+                isHovered -> 0.2f
+                else -> 0.15f
+            }
+        )
+    }
+    val shadowSpot = if (isFilled) {
+        colors.accent.copy(
+            alpha = when {
+                isPressed -> 0.25f
+                isHovered -> 0.45f
+                else -> 0.35f
+            }
+        )
+    } else {
+        colors.shadow.copy(
+            alpha = when {
+                isPressed -> 0.1f
+                isHovered -> 0.24f
+                else -> 0.18f
+            }
+        )
     }
 
     val checkProgress by animateFloatAsState(
@@ -132,29 +155,28 @@ fun CheckBox(
         modifier = modifier
             .size(CheckBoxSize)
             .graphicsLayer { translationY = lift.toPx() }
-            .then(
+            .shadow(
-                if (resolved.shadow.elevation > 0.dp) {
+                elevation = shadowElevation,
-                    Modifier.shadow(
+                shape = CheckBoxShape,
-                        elevation = resolved.shadow.elevation,
+                ambientColor = shadowAmbient,
-                        shape = resolved.shape,
+                spotColor = shadowSpot,
-                        ambientColor = resolved.shadow.ambientColor,
-                        spotColor = resolved.shadow.spotColor,
             )
-                } else Modifier
+            .clip(CheckBoxShape)
-            )
+            .background(backgroundBrush, CheckBoxShape)
-            .clip(resolved.shape)
+            .border(BorderStroke(borderWidth, borderColor), CheckBoxShape)
-            .background(resolved.colors.background, resolved.shape)
-            .border(BorderStroke(0.5.dp, borderColor), resolved.shape)
             .drawWithCache {
-                val highlightBrush = Brush.verticalGradient(
+                val highlight = Brush.verticalGradient(
-                    colors = listOf(resolved.colors.highlight, Color.Transparent),
+                    colors = listOf(
+                        if (isFilled) Color.White.copy(alpha = 0.25f) else colors.highlight,
+                        Color.Transparent,
+                    ),
                     startY = 0f,
                     endY = size.height * 0.5f,
                 )
                 onDrawWithContent {
                     drawContent()
                     drawRect(
-                        brush = highlightBrush,
+                        brush = highlight,
                         topLeft = Offset.Zero,
                         size = size,
                     )
@@ -193,7 +215,7 @@ fun CheckBox(
                     }
                     drawPath(
                         path = path,
-                        color = checkBoxTheme.checkmarkColor,
+                        color = colors.onAccent,
                         style = Stroke(
                             width = stroke,
                             cap = StrokeCap.Round,
@@ -211,8 +233,8 @@ fun CheckBox(
                     .background(
                         brush = Brush.horizontalGradient(
                             colors = listOf(
-                                checkBoxTheme.checkmarkColor,
+                                colors.onAccent,
-                                checkBoxTheme.checkmarkColor.copy(alpha = 0.92f),
+                                colors.onAccent.copy(alpha = 0.92f),
                             )
                         ),
                     ),
@@ -225,8 +247,6 @@ fun CheckBox(
 @Composable
 fun CheckBoxPreview() {
     MaterialTheme {
-        val theme = rememberBaseUITheme()
-        CompositionLocalProvider(LocalBaseUITheme provides theme) {
         Surface(
             color = MaterialTheme.colorScheme.background,
             modifier = Modifier.padding(24.dp),
@@ -264,4 +284,3 @@ fun CheckBoxPreview() {
         }
     }
 }
-}

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/ChipTabs.kt

@@ -27,10 +27,12 @@ import androidx.compose.foundation.interaction.collectIsHoveredAsState
 import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.Text
@@ -43,78 +45,57 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawWithCache
-import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 
+private val ChipTabShape = RoundedCornerShape(10.dp)
 private val ChipTabMinHeight = 36.dp
 
-private data class ResolvedChipState(
-    val colors: BaseUITheme.ButtonColors,
-    val shape: Shape,
-    val shadow: BaseUITheme.Shadow,
-    val border: BaseUITheme.Border,
-    val padding: androidx.compose.foundation.layout.PaddingValues,
-)
-
-@Composable
-private fun resolveChipState(
-    style: BaseUITheme.ButtonStyle,
-    isPressed: Boolean,
-    isHovered: Boolean,
-): ResolvedChipState {
-    return when {
-        isPressed -> ResolvedChipState(style.colors.pressed, style.shape.pressed, style.shadow.pressed, style.border.pressed, style.padding.pressed)
-        isHovered -> ResolvedChipState(style.colors.hovered, style.shape.hovered, style.shadow.hovered, style.border.hovered, style.padding.hovered)
-        else -> ResolvedChipState(style.colors.focused, style.shape.focused, style.shadow.focused, style.border.focused, style.padding.focused)
-    }
-}
-
-private fun Modifier.applyChipShadow(
-    shadow: BaseUITheme.Shadow,
-    shape: Shape,
-): Modifier {
-    return if (shadow.elevation > 0.dp) {
-        this.shadow(
-            elevation = shadow.elevation,
-            shape = shape,
-            ambientColor = shadow.ambientColor,
-            spotColor = shadow.spotColor,
-        )
-    } else {
-        this
-    }
-}
-
 @Composable
 fun ChipTab(
     selected: Boolean,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    theme: BaseUITheme.ChipTabTheme? = null,
+    contentPadding: PaddingValues = PaddingValues(horizontal = 14.dp, vertical = 4.dp),
     content: @Composable RowScope.() -> Unit,
 ) {
-    val baseTheme = LocalBaseUITheme.current.chipTab
+    val colors = rememberButtonColors()
-    val chipTheme = theme ?: baseTheme
-    val style = if (selected) chipTheme.selected else chipTheme.unselected
     val interactionSource = remember { MutableInteractionSource() }
     val isPressed by interactionSource.collectIsPressedAsState()
     val isHovered by interactionSource.collectIsHoveredAsState()
-    val state = resolveChipState(style, isPressed, isHovered)
+    val gradient = if (selected) {
+        primaryGradient(colors, isPressed)
+    } else {
+        outlinedGradient(colors, isPressed)
+    }
+    val borderColor = if (selected) {
+        colors.accent
+    } else {
+        colors.border.copy(alpha = if (isPressed) 0.7f else 1f)
+    }
+    val contentColor = if (selected) colors.onAccent else colors.onContainer
 
     Box(
         modifier = modifier
             .defaultMinSize(minHeight = ChipTabMinHeight)
             .hoverable(interactionSource = interactionSource, enabled = enabled)
-            .applyChipShadow(state.shadow, state.shape)
+            .then(
-            .clip(state.shape)
+                buttonShadow(
-            .background(state.colors.background, state.shape)
+                    shape = ChipTabShape,
-            .border(BorderStroke(state.border.width, state.border.color), state.shape)
+                    pressed = isPressed,
+                    primary = selected,
+                    colors = colors,
+                    hovered = isHovered,
+                )
+            )
+            .clip(ChipTabShape)
+            .background(gradient, ChipTabShape)
+            .border(BorderStroke(0.5.dp, borderColor), ChipTabShape)
             .clickable(
                 enabled = enabled,
                 interactionSource = interactionSource,
@@ -122,8 +103,13 @@ fun ChipTab(
                 onClick = onClick,
             )
             .drawWithCache {
+                val highlight = if (selected) {
+                    Color.White.copy(alpha = 0.25f)
+                } else {
+                    colors.highlight
+                }
                 val highlightBrush = Brush.verticalGradient(
-                    colors = listOf(state.colors.highlight, Color.Transparent),
+                    colors = listOf(highlight, Color.Transparent),
                     startY = 0f,
                     endY = size.height * 0.5f,
                 )
@@ -136,11 +122,11 @@ fun ChipTab(
                     )
                 }
             }
-            .padding(state.padding),
+            .padding(contentPadding),
         contentAlignment = Alignment.Center,
     ) {
         CompositionLocalProvider(
-            LocalContentColor provides state.colors.foreground,
+            LocalContentColor provides contentColor,
             LocalTextStyle provides LocalTextStyle.current.copy(
                 fontWeight = FontWeight.SemiBold,
                 fontSize = 14.sp,
@@ -163,14 +149,14 @@ fun ChipTab(
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
     leadingIcon: @Composable (() -> Unit)? = null,
-    theme: BaseUITheme.ChipTabTheme? = null,
+    contentPadding: PaddingValues = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
 ) {
     ChipTab(
         selected = selected,
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
-        theme = theme,
+        contentPadding = contentPadding,
     ) {
         if (leadingIcon != null) {
             leadingIcon()

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Slider.kt

@@ -43,7 +43,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableIntStateOf
@@ -80,10 +79,8 @@ fun Slider(
     steps: Int = 0,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     onValueChangeFinished: () -> Unit = {},
-    theme: BaseUITheme.SliderTheme? = null,
 ) {
-    val baseTheme = LocalBaseUITheme.current.slider
+    val colors = rememberButtonColors()
-    val sliderTheme = theme ?: baseTheme
     val isHovered by interactionSource.collectIsHoveredAsState()
     val isPressed by interactionSource.collectIsPressedAsState()
     val density = LocalDensity.current
@@ -92,30 +89,13 @@ fun Slider(
     val range = valueRange.endInclusive - valueRange.start
     val fraction = if (range > 0f) ((value - valueRange.start) / range).coerceIn(0f, 1f) else 0f
 
-    val stateColor = when {
+    val trackActiveColor = if (enabled) colors.accent else colors.onContainer.copy(alpha = 0.38f)
-        isPressed -> sliderTheme.trackActiveColor.pressed
+    val trackInactiveColor = if (enabled) {
-        isHovered -> sliderTheme.trackActiveColor.hovered
+        colors.border.copy(alpha = 0.6f)
-        else -> sliderTheme.trackActiveColor.focused
+    } else {
+        colors.onContainer.copy(alpha = 0.2f)
     }
-    val inactiveColor = when {
+    val thumbColor = if (enabled) colors.accent else colors.onContainer.copy(alpha = 0.38f)
-        isPressed -> sliderTheme.trackInactiveColor.pressed
-        isHovered -> sliderTheme.trackInactiveColor.hovered
-        else -> sliderTheme.trackInactiveColor.focused
-    }
-    val thumbColor = when {
-        isPressed -> sliderTheme.thumbColor.pressed
-        isHovered -> sliderTheme.thumbColor.hovered
-        else -> sliderTheme.thumbColor.focused
-    }
-    val thumbShadowState = when {
-        isPressed -> sliderTheme.thumbShadow.pressed
-        isHovered -> sliderTheme.thumbShadow.hovered
-        else -> sliderTheme.thumbShadow.focused
-    }
-
-    val trackActiveColor = if (enabled) stateColor else stateColor.copy(alpha = 0.38f)
-    val trackInactiveColor = if (enabled) inactiveColor else inactiveColor.copy(alpha = 0.38f)
-    val resolvedThumbColor = if (enabled) thumbColor else thumbColor.copy(alpha = 0.38f)
 
     val thumbScale by animateFloatAsState(
         targetValue = when {
@@ -127,6 +107,12 @@ fun Slider(
         label = "thumbScale",
     )
 
+    val thumbElevation = when {
+        isPressed -> 2.dp
+        isHovered -> 8.dp
+        else -> 5.dp
+    }
+
     Box(
         modifier = modifier
             .fillMaxWidth()
@@ -255,9 +241,9 @@ fun Slider(
                         val x = trackStart + stepSpacing * i
                         drawCircle(
                             color = if (x <= activeEnd) {
-                                sliderTheme.stepActiveColor
+                                colors.onAccent.copy(alpha = 0.5f)
                             } else {
-                                sliderTheme.stepInactiveColor
+                                colors.onContainer.copy(alpha = 0.25f)
                             },
                             radius = 2.dp.toPx(),
                             center = Offset(x, trackY),
@@ -281,17 +267,17 @@ fun Slider(
                     scaleY = thumbScale
                 }
                 .shadow(
-                    elevation = thumbShadowState.elevation,
+                    elevation = thumbElevation,
                     shape = CircleShape,
-                    ambientColor = thumbShadowState.ambientColor,
+                    ambientColor = colors.accent.copy(alpha = 0.35f),
-                    spotColor = thumbShadowState.spotColor,
+                    spotColor = colors.accent.copy(alpha = 0.5f),
                 )
                 .background(
                     brush = Brush.radialGradient(
                         colors = listOf(
                             Color.White.copy(alpha = 0.6f),
-                            resolvedThumbColor.copy(alpha = 0.95f),
+                            thumbColor.copy(alpha = 0.95f),
-                            resolvedThumbColor,
+                            thumbColor,
                         ),
                         center = Offset(0f, -0.55f),
                         radius = 1.1f,

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/TextField.kt

@@ -34,6 +34,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
@@ -51,7 +52,6 @@ import androidx.compose.ui.draw.drawWithCache
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.VisualTransformation
@@ -61,28 +61,32 @@ import dev.krtirtho.spotube.resources.iconsax.Iconsax
 import dev.krtirtho.spotube.resources.iconsax.IconsaxSearchBroken
 import dev.krtirtho.spotube.resources.iconsax.IconsaxTrash
 
+private val TextFieldShape = RoundedCornerShape(14.dp)
 private val TextFieldMinHeight = 44.dp
 
-private data class ResolvedTextFieldState(
-    val background: Brush,
-    val highlight: Color,
-    val shape: Shape,
-    val border: BaseUITheme.Border,
-    val shadow: BaseUITheme.Shadow,
-    val foreground: Color,
-)
-
 @Composable
-private fun resolveTextFieldState(
+internal fun textFieldShadow(
-    theme: BaseUITheme.TextFieldTheme,
+    shape: androidx.compose.ui.graphics.Shape,
-    isFocused: Boolean,
+    focused: Boolean,
-    isHovered: Boolean,
+    colors: ButtonColors,
-): ResolvedTextFieldState {
+): Modifier {
-    return when {
+    val elevation = if (focused) 9.dp else 6.dp
-        isFocused -> ResolvedTextFieldState(theme.background.focused, theme.highlight.focused, theme.shape.focused, theme.border.focused, theme.shadow.focused, theme.foreground.focused)
+    val ambient = if (focused) {
-        isHovered -> ResolvedTextFieldState(theme.background.hovered, theme.highlight.hovered, theme.shape.hovered, theme.border.hovered, theme.shadow.hovered, theme.foreground.hovered)
+        colors.accent.copy(alpha = 0.2f)
-        else -> ResolvedTextFieldState(theme.background.pressed, theme.highlight.pressed, theme.shape.pressed, theme.border.pressed, theme.shadow.pressed, theme.foreground.pressed)
+    } else {
+        colors.shadow.copy(alpha = 0.15f)
     }
+    val spot = if (focused) {
+        colors.accent.copy(alpha = 0.25f)
+    } else {
+        colors.shadow.copy(alpha = 0.18f)
+    }
+    return Modifier.shadow(
+        elevation = elevation,
+        shape = shape,
+        ambientColor = ambient,
+        spotColor = spot,
+    )
 }
 
 @Composable
@@ -104,29 +108,25 @@ fun TextField(
     visualTransformation: VisualTransformation = VisualTransformation.None,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     textStyle: TextStyle = TextStyle.Default,
-    cursorBrush: Color? = null,
+    cursorBrush: Color = MaterialTheme.colorScheme.primary,
-    theme: BaseUITheme.TextFieldTheme? = null,
 ) {
-    val baseTheme = LocalBaseUITheme.current.textField
+    val colors = rememberButtonColors()
-    val textFieldTheme = theme ?: baseTheme
     val isFocused by interactionSource.collectIsFocusedAsState()
     val isHovered by interactionSource.collectIsHoveredAsState()
 
-    val state = resolveTextFieldState(textFieldTheme, isFocused, isHovered)
+    val gradient = outlinedGradient(colors, false)
-
+    val border = when {
-    val resolvedBorder = if (isError) {
+        isError -> MaterialTheme.colorScheme.error
-        BaseUITheme.Border(MaterialTheme.colorScheme.error, state.border.width)
+        isFocused -> MaterialTheme.colorScheme.primary
-    } else {
+        isHovered -> colors.border.copy(alpha = 0.85f)
-        state.border
+        else -> colors.border
     }
 
     val contentColor = when {
-        !enabled -> state.foreground.copy(alpha = 0.38f)
+        !enabled -> colors.onContainer.copy(alpha = 0.38f)
-        else -> state.foreground
+        else -> colors.onContainer
     }
 
-    val cursor = cursorBrush?.let { SolidColor(it) } ?: textFieldTheme.cursor
-
     Column(modifier = modifier) {
         AnimatedVisibility(
             visible = label != null,
@@ -139,22 +139,13 @@ fun TextField(
         Box(
             modifier = Modifier
                 .defaultMinSize(minHeight = TextFieldMinHeight)
-                .then(
+                .then(textFieldShadow(TextFieldShape, isFocused, colors))
-                    if (state.shadow.elevation > 0.dp) {
+                .clip(TextFieldShape)
-                        Modifier.shadow(
+                .background(gradient, TextFieldShape)
-                            elevation = state.shadow.elevation,
+                .border(BorderStroke(0.5.dp, border), TextFieldShape)
-                            shape = state.shape,
-                            ambientColor = state.shadow.ambientColor,
-                            spotColor = state.shadow.spotColor,
-                        )
-                    } else Modifier
-                )
-                .clip(state.shape)
-                .background(state.background, state.shape)
-                .border(BorderStroke(resolvedBorder.width, resolvedBorder.color), state.shape)
                 .drawWithCache {
                     val highlightBrush = Brush.verticalGradient(
-                        colors = listOf(state.highlight, Color.Transparent),
+                        colors = listOf(colors.highlight, Color.Transparent),
                         startY = 0f,
                         endY = size.height * 0.5f,
                     )
@@ -167,7 +158,7 @@ fun TextField(
                         )
                     }
                 }
-                .padding(textFieldTheme.padding),
+                .padding(horizontal = 14.dp, vertical = 10.dp),
         ) {
             Row(
                 verticalAlignment = Alignment.CenterVertically,
@@ -186,7 +177,7 @@ fun TextField(
                         enabled = enabled,
                         readOnly = readOnly,
                         textStyle = textStyle.copy(color = contentColor),
-                        cursorBrush = cursor,
+                        cursorBrush = SolidColor(cursorBrush),
                         keyboardOptions = keyboardOptions,
                         keyboardActions = keyboardActions,
                         singleLine = singleLine,
@@ -219,8 +210,6 @@ fun TextField(
 @Composable
 fun TextFieldPreview() {
     MaterialTheme {
-        val theme = rememberBaseUITheme()
-        CompositionLocalProvider(LocalBaseUITheme provides theme) {
         androidx.compose.material3.Surface(
             color = MaterialTheme.colorScheme.background,
             modifier = Modifier.padding(24.dp),
@@ -254,4 +243,3 @@ fun TextFieldPreview() {
         }
     }
 }
-}

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Theme.kt

@@ -1,756 +0,0 @@
-/*
- * Copyright (C) 2026 Kingkor Roy Tirtho and Spotube Contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package dev.krtirtho.spotube.core.ui.base
-
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.Stable
-import androidx.compose.runtime.staticCompositionLocalOf
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.graphics.SolidColor
-import androidx.compose.ui.graphics.luminance
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import dev.krtirtho.spotube.core.ui.base.BaseUITheme.AutoCompleteMenuTheme
-import dev.krtirtho.spotube.core.ui.base.BaseUITheme.CheckBoxTheme
-import dev.krtirtho.spotube.core.ui.base.BaseUITheme.ChipTabTheme
-import dev.krtirtho.spotube.core.ui.base.BaseUITheme.SliderTheme
-import dev.krtirtho.spotube.core.ui.base.BaseUITheme.TextFieldTheme
-
-@Stable
-data class BaseUITheme(
-    val buttons: ButtonVariants,
-    val iconButtons: ButtonVariants,
-    val textField: TextFieldTheme,
-    val autoCompleteMenuTheme: AutoCompleteMenuTheme,
-    val slider: SliderTheme,
-    val checkBox: CheckBoxTheme,
-    val chipTab: ChipTabTheme,
-    val card: CardTheme,
-    val listRowTile: ListRowTheme,
-) {
-
-    @Stable
-    data class InteractionState<T>(
-        val hovered: T,
-        val pressed: T,
-        val focused: T,
-    ) {
-        companion object {
-            fun <T> fromSingleValue(value: T): InteractionState<T> {
-                return InteractionState(value, value, value)
-            }
-        }
-    }
-
-    @Stable
-    data class AdvancedInteractionState<T>(
-        val hovered: T,
-        val pressed: T,
-        val focused: T,
-        val selected: T,
-        val disabled: T,
-    ) {
-        companion object {
-            fun <T> fromSingleValue(value: T): AdvancedInteractionState<T> {
-                return AdvancedInteractionState(value, value, value, value, value)
-            }
-        }
-    }
-
-    @Stable
-    data class Border(
-        val color: Color,
-        val width: Dp,
-    )
-
-    @Stable
-    data class Shadow(
-        val elevation: Dp,
-        val clip: Boolean = elevation > 0.dp,
-        val ambientColor: Color,
-        val spotColor: Color,
-    )
-
-    @Stable
-    data class ButtonVariants(
-        val primary: ButtonStyle,
-        val secondary: ButtonStyle,
-        val outline: ButtonStyle,
-        val ghost: ButtonStyle,
-    )
-
-    @Stable
-    data class ButtonStyle(
-        val colors: InteractionState<ButtonColors>,
-        val shape: InteractionState<Shape>,
-        val shadow: InteractionState<Shadow>,
-        val border: InteractionState<Border>,
-        val padding: InteractionState<PaddingValues>,
-    )
-
-    @Stable
-    data class ButtonColors(
-        val background: Brush,
-        val foreground: Color,
-        val highlight: Color,
-    )
-
-    data class CardTheme(
-        val background: Brush,
-        val shape: Shape,
-        val border: Border,
-        val padding: PaddingValues,
-        val shadow: Shadow,
-    )
-
-    data class ListRowTheme(
-        val background: AdvancedInteractionState<Brush>,
-        val shape: AdvancedInteractionState<Shape>,
-        val border: AdvancedInteractionState<Border>,
-        val shadow: AdvancedInteractionState<Shadow>,
-        val padding: PaddingValues,
-        val textStyle: AdvancedInteractionState<TextStyle>,
-        val foreground: AdvancedInteractionState<Color>,
-    )
-
-    data class TextFieldTheme(
-        val background: InteractionState<Brush>,
-        val highlight: InteractionState<Color>,
-        val shape: InteractionState<Shape>,
-        val border: InteractionState<Border>,
-        val shadow: InteractionState<Shadow>,
-        val padding: PaddingValues,
-        val textStyle: TextStyle,
-        val cursor: Brush,
-        val foreground: InteractionState<Color>,
-    )
-
-    data class AutoCompleteMenuTheme(
-        val background: Brush,
-        val shape: Shape,
-        val border: Border,
-        val padding: PaddingValues,
-        val shadowElevation: Dp,
-    )
-
-    data class SliderTheme(
-        val trackActiveColor: InteractionState<Color>,
-        val trackInactiveColor: InteractionState<Color>,
-        val thumbColor: InteractionState<Color>,
-        val thumbShadow: InteractionState<Shadow>,
-        val stepActiveColor: Color,
-        val stepInactiveColor: Color,
-    )
-
-    data class CheckBoxTheme(
-        val selected: ButtonStyle,
-        val unselected: ButtonStyle,
-        val checkmarkColor: Color,
-    )
-
-    data class ChipTabTheme(
-        val selected: ButtonStyle,
-        val unselected: ButtonStyle,
-    )
-}
-
-val LocalBaseUITheme = staticCompositionLocalOf<BaseUITheme> {
-    throw IllegalStateException("No BaseUITheme provided")
-}
-
-@Composable
-fun rememberBaseUITheme(): BaseUITheme {
-    val scheme = MaterialTheme.colorScheme
-    val isLight = scheme.surface.luminance() > 0.5f
-
-    val containerLighter = if (isLight) Color.White else scheme.surfaceContainerHigh
-    val containerDarker = if (isLight) Color(0xFFF2F2F4) else scheme.surfaceContainer
-    val containerPressed = if (isLight) Color(0xFFE0E0E3) else scheme.surfaceContainerHighest
-    val highlight = if (isLight) Color.White.copy(alpha = 0.9f) else Color.White.copy(alpha = 0.06f)
-    val shadowColor = scheme.onSurface
-    val border = scheme.outlineVariant
-
-    val secondaryContainer = scheme.secondaryContainer
-    val secondaryContainerPressed = secondaryContainer.copy(alpha = if (isLight) 0.85f else 0.92f)
-    val secondaryHighlight =
-        if (isLight) Color.White.copy(alpha = 0.5f) else Color.White.copy(alpha = 0.08f)
-
-    val defaultShape = RoundedCornerShape(14.dp)
-    val defaultShapeState =
-        BaseUITheme.InteractionState<Shape>(defaultShape, defaultShape, defaultShape)
-    val noBorder = BaseUITheme.Border(Color.Transparent, 0.dp)
-    val noBorderState = BaseUITheme.InteractionState(noBorder, noBorder, noBorder)
-    val noShadow = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent)
-    val noShadowState = BaseUITheme.InteractionState(noShadow, noShadow, noShadow)
-    val defaultButtonPadding = BaseUITheme.InteractionState(
-        PaddingValues(horizontal = 20.dp, vertical = 10.dp),
-        PaddingValues(horizontal = 20.dp, vertical = 10.dp),
-        PaddingValues(horizontal = 20.dp, vertical = 10.dp),
-    )
-    val iconButtonPadding = BaseUITheme.InteractionState(
-        PaddingValues(8.dp),
-        PaddingValues(8.dp),
-        PaddingValues(8.dp),
-    )
-
-    val outlineColors = BaseUITheme.InteractionState(
-        hovered = BaseUITheme.ButtonColors(
-            background = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
-            foreground = scheme.onSurface,
-            highlight = highlight,
-        ),
-        pressed = BaseUITheme.ButtonColors(
-            background = Brush.verticalGradient(listOf(containerPressed, containerPressed)),
-            foreground = scheme.onSurface,
-            highlight = highlight,
-        ),
-        focused = BaseUITheme.ButtonColors(
-            background = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
-            foreground = scheme.onSurface,
-            highlight = highlight,
-        ),
-    )
-    val outlineShadow = BaseUITheme.InteractionState(
-        hovered = BaseUITheme.Shadow(
-            9.dp,
-            true,
-            shadowColor.copy(alpha = 0.22f),
-            shadowColor.copy(alpha = 0.26f)
-        ),
-        pressed = BaseUITheme.Shadow(
-            1.dp,
-            true,
-            shadowColor.copy(alpha = 0.08f),
-            shadowColor.copy(alpha = 0.1f)
-        ),
-        focused = BaseUITheme.Shadow(
-            6.dp,
-            true,
-            shadowColor.copy(alpha = 0.15f),
-            shadowColor.copy(alpha = 0.18f)
-        ),
-    )
-    val outlineBorder = BaseUITheme.InteractionState(
-        hovered = BaseUITheme.Border(border, 0.5.dp),
-        pressed = BaseUITheme.Border(border.copy(alpha = 0.7f), 0.5.dp),
-        focused = BaseUITheme.Border(border, 0.5.dp),
-    )
-
-    val primaryColors = BaseUITheme.InteractionState(
-        hovered = BaseUITheme.ButtonColors(
-            background = Brush.verticalGradient(listOf(scheme.primary, scheme.primary)),
-            foreground = scheme.onPrimary,
-            highlight = Color.White.copy(alpha = 0.25f),
-        ),
-        pressed = BaseUITheme.ButtonColors(
-            background = Brush.verticalGradient(
-                listOf(
-                    scheme.primary.copy(alpha = 0.85f),
-                    scheme.primary
-                )
-            ),
-            foreground = scheme.onPrimary,
-            highlight = Color.White.copy(alpha = 0.25f),
-        ),
-        focused = BaseUITheme.ButtonColors(
-            background = Brush.verticalGradient(listOf(scheme.primary, scheme.primary)),
-            foreground = scheme.onPrimary,
-            highlight = Color.White.copy(alpha = 0.25f),
-        ),
-    )
-    val primaryShadow = BaseUITheme.InteractionState(
-        hovered = BaseUITheme.Shadow(
-            9.dp,
-            true,
-            scheme.primary.copy(alpha = 0.45f),
-            scheme.primary.copy(alpha = 0.5f)
-        ),
-        pressed = BaseUITheme.Shadow(
-            1.dp,
-            true,
-            scheme.primary.copy(alpha = 0.2f),
-            scheme.primary.copy(alpha = 0.25f)
-        ),
-        focused = BaseUITheme.Shadow(
-            6.dp,
-            true,
-            scheme.primary.copy(alpha = 0.35f),
-            scheme.primary.copy(alpha = 0.4f)
-        ),
-    )
-    val primaryBorder = BaseUITheme.InteractionState(
-        hovered = BaseUITheme.Border(scheme.primary, 0.5.dp),
-        pressed = BaseUITheme.Border(scheme.primary, 0.5.dp),
-        focused = BaseUITheme.Border(scheme.primary, 0.5.dp),
-    )
-
-    val secondaryColors = BaseUITheme.InteractionState(
-        hovered = BaseUITheme.ButtonColors(
-            background = Brush.verticalGradient(
-                listOf(
-                    secondaryContainer,
-                    secondaryContainer.copy(alpha = if (secondaryContainer.luminance() > 0.5f) 0.92f else 1f)
-                )
-            ),
-            foreground = scheme.onSecondaryContainer,
-            highlight = secondaryHighlight,
-        ),
-        pressed = BaseUITheme.ButtonColors(
-            background = Brush.verticalGradient(
-                listOf(
-                    secondaryContainerPressed,
-                    secondaryContainerPressed
-                )
-            ),
-            foreground = scheme.onSecondaryContainer,
-            highlight = secondaryHighlight,
-        ),
-        focused = BaseUITheme.ButtonColors(
-            background = Brush.verticalGradient(
-                listOf(
-                    secondaryContainer,
-                    secondaryContainer.copy(alpha = if (secondaryContainer.luminance() > 0.5f) 0.92f else 1f)
-                )
-            ),
-            foreground = scheme.onSecondaryContainer,
-            highlight = secondaryHighlight,
-        ),
-    )
-    val secondaryShadow = BaseUITheme.InteractionState(
-        hovered = BaseUITheme.Shadow(
-            9.dp,
-            true,
-            shadowColor.copy(alpha = 0.22f),
-            shadowColor.copy(alpha = 0.26f)
-        ),
-        pressed = BaseUITheme.Shadow(
-            1.dp,
-            true,
-            shadowColor.copy(alpha = 0.08f),
-            shadowColor.copy(alpha = 0.1f)
-        ),
-        focused = BaseUITheme.Shadow(
-            6.dp,
-            true,
-            shadowColor.copy(alpha = 0.15f),
-            shadowColor.copy(alpha = 0.18f)
-        ),
-    )
-    val secondaryBorder = BaseUITheme.InteractionState(
-        hovered = BaseUITheme.Border(secondaryContainer.copy(alpha = 0.5f), 0.5.dp),
-        pressed = BaseUITheme.Border(secondaryContainer.copy(alpha = 0.5f), 0.5.dp),
-        focused = BaseUITheme.Border(secondaryContainer.copy(alpha = 0.5f), 0.5.dp),
-    )
-
-    val ghostColors = BaseUITheme.InteractionState(
-        hovered = BaseUITheme.ButtonColors(
-            background = Brush.verticalGradient(
-                listOf(
-                    containerPressed.copy(alpha = 0.5f),
-                    containerPressed.copy(alpha = 0.5f)
-                )
-            ),
-            foreground = scheme.onSurface,
-            highlight = Color.Transparent,
-        ),
-        pressed = BaseUITheme.ButtonColors(
-            background = Brush.verticalGradient(listOf(containerPressed, containerPressed)),
-            foreground = scheme.onSurface,
-            highlight = Color.Transparent,
-        ),
-        focused = BaseUITheme.ButtonColors(
-            background = Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent)),
-            foreground = scheme.onSurface,
-            highlight = Color.Transparent,
-        ),
-    )
-
-    val outlineStyle = BaseUITheme.ButtonStyle(
-        outlineColors,
-        defaultShapeState,
-        outlineShadow,
-        outlineBorder,
-        defaultButtonPadding
-    )
-    val primaryStyle = BaseUITheme.ButtonStyle(
-        primaryColors,
-        defaultShapeState,
-        primaryShadow,
-        primaryBorder,
-        defaultButtonPadding
-    )
-    val secondaryStyle = BaseUITheme.ButtonStyle(
-        secondaryColors,
-        defaultShapeState,
-        secondaryShadow,
-        secondaryBorder,
-        defaultButtonPadding
-    )
-    val ghostStyle = BaseUITheme.ButtonStyle(
-        ghostColors,
-        defaultShapeState,
-        noShadowState,
-        noBorderState,
-        defaultButtonPadding
-    )
-
-    val outlineIconStyle = BaseUITheme.ButtonStyle(
-        outlineColors,
-        defaultShapeState,
-        outlineShadow,
-        outlineBorder,
-        iconButtonPadding
-    )
-    val primaryIconStyle = BaseUITheme.ButtonStyle(
-        primaryColors,
-        defaultShapeState,
-        primaryShadow,
-        primaryBorder,
-        iconButtonPadding
-    )
-    val secondaryIconStyle = BaseUITheme.ButtonStyle(
-        secondaryColors,
-        defaultShapeState,
-        secondaryShadow,
-        secondaryBorder,
-        iconButtonPadding
-    )
-    val ghostIconStyle = BaseUITheme.ButtonStyle(
-        ghostColors,
-        defaultShapeState,
-        noShadowState,
-        noBorderState,
-        iconButtonPadding
-    )
-
-    val textFieldForeground = BaseUITheme.InteractionState(
-        hovered = scheme.onSurface,
-        pressed = scheme.onSurface,
-        focused = scheme.onSurface,
-    )
-
-    val checkBoxShape = RoundedCornerShape(6.dp)
-    val checkBoxShapeState =
-        BaseUITheme.InteractionState<Shape>(checkBoxShape, checkBoxShape, checkBoxShape)
-    val noPadding =
-        BaseUITheme.InteractionState(PaddingValues(0.dp), PaddingValues(0.dp), PaddingValues(0.dp))
-
-    val chipTabShape = RoundedCornerShape(10.dp)
-    val chipTabShapeState =
-        BaseUITheme.InteractionState<Shape>(chipTabShape, chipTabShape, chipTabShape)
-    val chipTabPadding = BaseUITheme.InteractionState(
-        PaddingValues(horizontal = 14.dp, vertical = 4.dp),
-        PaddingValues(horizontal = 14.dp, vertical = 4.dp),
-        PaddingValues(horizontal = 14.dp, vertical = 4.dp),
-    )
-
-    return BaseUITheme(
-        buttons = BaseUITheme.ButtonVariants(
-            primary = primaryStyle,
-            secondary = secondaryStyle,
-            outline = outlineStyle,
-            ghost = ghostStyle,
-        ),
-        iconButtons = BaseUITheme.ButtonVariants(
-            primary = primaryIconStyle,
-            secondary = secondaryIconStyle,
-            outline = outlineIconStyle,
-            ghost = ghostIconStyle,
-        ),
-        textField = TextFieldTheme(
-            background = BaseUITheme.InteractionState(
-                hovered = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
-                pressed = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
-                focused = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
-            ),
-            highlight = BaseUITheme.InteractionState(
-                hovered = highlight,
-                pressed = highlight,
-                focused = highlight,
-            ),
-            shape = BaseUITheme.InteractionState(
-                hovered = defaultShape,
-                pressed = defaultShape,
-                focused = defaultShape,
-            ),
-            border = BaseUITheme.InteractionState(
-                hovered = BaseUITheme.Border(border.copy(alpha = 0.85f), 0.5.dp),
-                pressed = BaseUITheme.Border(border, 0.5.dp),
-                focused = BaseUITheme.Border(scheme.primary, 0.5.dp),
-            ),
-            shadow = BaseUITheme.InteractionState(
-                hovered = BaseUITheme.Shadow(
-                    9.dp,
-                    true,
-                    shadowColor.copy(alpha = 0.22f),
-                    shadowColor.copy(alpha = 0.26f)
-                ),
-                pressed = BaseUITheme.Shadow(
-                    6.dp,
-                    true,
-                    shadowColor.copy(alpha = 0.15f),
-                    shadowColor.copy(alpha = 0.18f)
-                ),
-                focused = BaseUITheme.Shadow(
-                    9.dp,
-                    true,
-                    scheme.primary.copy(alpha = 0.2f),
-                    scheme.primary.copy(alpha = 0.25f)
-                ),
-            ),
-            padding = PaddingValues(horizontal = 14.dp, vertical = 10.dp),
-            textStyle = TextStyle.Default,
-            cursor = SolidColor(scheme.primary),
-            foreground = textFieldForeground,
-        ),
-        autoCompleteMenuTheme = AutoCompleteMenuTheme(
-            background = Brush.verticalGradient(
-                listOf(
-                    scheme.surfaceContainerHigh,
-                    scheme.surfaceContainer
-                )
-            ),
-            shape = RoundedCornerShape(12.dp),
-            border = BaseUITheme.Border(border, 0.5.dp),
-            padding = PaddingValues(0.dp),
-            shadowElevation = 8.dp,
-        ),
-        slider = SliderTheme(
-            trackActiveColor = BaseUITheme.InteractionState(
-                hovered = scheme.primary,
-                pressed = scheme.primary,
-                focused = scheme.primary,
-            ),
-            trackInactiveColor = BaseUITheme.InteractionState(
-                hovered = border.copy(alpha = 0.6f),
-                pressed = border.copy(alpha = 0.6f),
-                focused = border.copy(alpha = 0.6f),
-            ),
-            thumbColor = BaseUITheme.InteractionState(
-                hovered = scheme.primary,
-                pressed = scheme.primary,
-                focused = scheme.primary,
-            ),
-            thumbShadow = BaseUITheme.InteractionState(
-                hovered = BaseUITheme.Shadow(
-                    8.dp,
-                    true,
-                    scheme.primary.copy(alpha = 0.4f),
-                    scheme.primary.copy(alpha = 0.5f)
-                ),
-                pressed = BaseUITheme.Shadow(
-                    2.dp,
-                    true,
-                    scheme.primary.copy(alpha = 0.2f),
-                    scheme.primary.copy(alpha = 0.25f)
-                ),
-                focused = BaseUITheme.Shadow(
-                    5.dp,
-                    true,
-                    scheme.primary.copy(alpha = 0.35f),
-                    scheme.primary.copy(alpha = 0.4f)
-                ),
-            ),
-            stepActiveColor = scheme.onPrimary.copy(alpha = 0.5f),
-            stepInactiveColor = scheme.onSurface.copy(alpha = 0.25f),
-        ),
-        checkBox = CheckBoxTheme(
-            selected = BaseUITheme.ButtonStyle(
-                colors = primaryColors,
-                shape = checkBoxShapeState,
-                shadow = BaseUITheme.InteractionState(
-                    hovered = BaseUITheme.Shadow(
-                        8.dp,
-                        true,
-                        scheme.primary.copy(alpha = 0.4f),
-                        scheme.primary.copy(alpha = 0.45f)
-                    ),
-                    pressed = BaseUITheme.Shadow(
-                        1.dp,
-                        true,
-                        scheme.primary.copy(alpha = 0.2f),
-                        scheme.primary.copy(alpha = 0.25f)
-                    ),
-                    focused = BaseUITheme.Shadow(
-                        6.dp,
-                        true,
-                        scheme.primary.copy(alpha = 0.3f),
-                        scheme.primary.copy(alpha = 0.35f)
-                    ),
-                ),
-                border = primaryBorder,
-                padding = noPadding,
-            ),
-            unselected = BaseUITheme.ButtonStyle(
-                colors = outlineColors,
-                shape = checkBoxShapeState,
-                shadow = BaseUITheme.InteractionState(
-                    hovered = BaseUITheme.Shadow(
-                        5.dp,
-                        true,
-                        shadowColor.copy(alpha = 0.2f),
-                        shadowColor.copy(alpha = 0.24f)
-                    ),
-                    pressed = BaseUITheme.Shadow(
-                        1.dp,
-                        true,
-                        shadowColor.copy(alpha = 0.08f),
-                        shadowColor.copy(alpha = 0.1f)
-                    ),
-                    focused = BaseUITheme.Shadow(
-                        3.dp,
-                        true,
-                        shadowColor.copy(alpha = 0.15f),
-                        shadowColor.copy(alpha = 0.18f)
-                    ),
-                ),
-                border = outlineBorder,
-                padding = noPadding,
-            ),
-            checkmarkColor = scheme.onPrimary,
-        ),
-        chipTab = ChipTabTheme(
-            selected = BaseUITheme.ButtonStyle(
-                colors = primaryColors,
-                shape = chipTabShapeState,
-                shadow = primaryShadow,
-                border = primaryBorder,
-                padding = chipTabPadding,
-            ),
-            unselected = BaseUITheme.ButtonStyle(
-                colors = outlineColors,
-                shape = chipTabShapeState,
-                shadow = outlineShadow,
-                border = outlineBorder,
-                padding = chipTabPadding,
-            ),
-        ),
-        card = BaseUITheme.CardTheme(
-            background = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
-            shape = RoundedCornerShape(16.dp),
-            border = BaseUITheme.Border(border, 0.5.dp),
-            padding = PaddingValues(0.dp),
-            shadow = BaseUITheme.Shadow(6.dp, true, shadowColor.copy(alpha = 0.15f), shadowColor.copy(alpha = 0.18f)),
-        ),
-        listRowTile = BaseUITheme.ListRowTheme(
-            background = BaseUITheme.AdvancedInteractionState(
-                hovered = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
-                pressed = Brush.verticalGradient(listOf(containerPressed, containerPressed)),
-                focused = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
-                selected = Brush.verticalGradient(listOf(scheme.primaryContainer.copy(alpha = 0.3f), scheme.primaryContainer.copy(alpha = 0.3f))),
-                disabled = Brush.verticalGradient(listOf(containerLighter.copy(alpha = 0.5f), containerDarker.copy(alpha = 0.5f))),
-            ),
-            shape = BaseUITheme.AdvancedInteractionState(
-                hovered = RoundedCornerShape(8.dp),
-                pressed = RoundedCornerShape(8.dp),
-                focused = RoundedCornerShape(8.dp),
-                selected = RoundedCornerShape(8.dp),
-                disabled = RoundedCornerShape(8.dp),
-            ),
-            border = BaseUITheme.AdvancedInteractionState(
-                hovered = BaseUITheme.Border(Color.Transparent, 0.dp),
-                pressed = BaseUITheme.Border(Color.Transparent, 0.dp),
-                focused = BaseUITheme.Border(Color.Transparent, 0.dp),
-                selected = BaseUITheme.Border(Color.Transparent, 0.dp),
-                disabled = BaseUITheme.Border(Color.Transparent, 0.dp),
-            ),
-            shadow = BaseUITheme.AdvancedInteractionState(
-                hovered = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent),
-                pressed = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent),
-                focused = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent),
-                selected = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent),
-                disabled = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent),
-            ),
-            padding = PaddingValues(horizontal = 8.dp, vertical = 6.dp),
-            textStyle = BaseUITheme.AdvancedInteractionState(
-                hovered = TextStyle.Default,
-                pressed = TextStyle.Default,
-                focused = TextStyle.Default,
-                selected = TextStyle.Default,
-                disabled = TextStyle.Default,
-            ),
-            foreground = BaseUITheme.AdvancedInteractionState(
-                hovered = scheme.onSurface,
-                pressed = scheme.onSurface,
-                focused = scheme.onSurface,
-                selected = scheme.onSurface,
-                disabled = scheme.onSurface.copy(alpha = 0.38f),
-            ),
-        ),
-    )
-}
-
-// Helper functions for easier theme overrides
-
-fun BaseUITheme.ButtonStyle.copyShape(shape: Shape): BaseUITheme.ButtonStyle =
-    copy(shape = BaseUITheme.InteractionState.fromSingleValue(shape))
-
-fun BaseUITheme.ButtonStyle.copyShadow(shadow: BaseUITheme.Shadow): BaseUITheme.ButtonStyle =
-    copy(shadow = BaseUITheme.InteractionState.fromSingleValue(shadow))
-
-fun BaseUITheme.ButtonStyle.copyBorder(border: BaseUITheme.Border): BaseUITheme.ButtonStyle =
-    copy(border = BaseUITheme.InteractionState.fromSingleValue(border))
-
-fun BaseUITheme.ButtonStyle.copyPadding(padding: PaddingValues): BaseUITheme.ButtonStyle =
-    copy(padding = BaseUITheme.InteractionState.fromSingleValue(padding))
-
-fun BaseUITheme.ButtonStyle.copyColors(colors: BaseUITheme.ButtonColors): BaseUITheme.ButtonStyle =
-    copy(colors = BaseUITheme.InteractionState.fromSingleValue(colors))
-
-@Composable
-fun invertedButtonStyle(): BaseUITheme.ButtonStyle {
-    val scheme = MaterialTheme.colorScheme
-    val isLight = scheme.surface.luminance() > 0.5f
-    val shadowColor = scheme.onSurface
-
-    val invertedColors = BaseUITheme.ButtonColors(
-        background = Brush.verticalGradient(listOf(scheme.onSurface, scheme.onSurface)),
-        foreground = scheme.surface,
-        highlight = if (isLight) Color.White.copy(alpha = 0.15f) else Color.White.copy(alpha = 0.08f),
-    )
-    val pressedColors = BaseUITheme.ButtonColors(
-        background = Brush.verticalGradient(listOf(scheme.onSurfaceVariant, scheme.onSurfaceVariant)),
-        foreground = scheme.surface,
-        highlight = if (isLight) Color.White.copy(alpha = 0.1f) else Color.White.copy(alpha = 0.05f),
-    )
-    val border = BaseUITheme.Border(scheme.onSurfaceVariant, 0.5.dp)
-    val shadow = BaseUITheme.Shadow(
-        elevation = 6.dp,
-        clip = true,
-        ambientColor = shadowColor.copy(alpha = 0.2f),
-        spotColor = shadowColor.copy(alpha = 0.25f),
-    )
-
-    return BaseUITheme.ButtonStyle(
-        colors = BaseUITheme.InteractionState(
-            hovered = invertedColors,
-            pressed = pressedColors,
-            focused = invertedColors,
-        ),
-        shape = BaseUITheme.InteractionState.fromSingleValue(RoundedCornerShape(14.dp)),
-        shadow = BaseUITheme.InteractionState.fromSingleValue(shadow),
-        border = BaseUITheme.InteractionState.fromSingleValue(border),
-        padding = BaseUITheme.InteractionState.fromSingleValue(PaddingValues(8.dp)),
-    )
-}

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/TrackList.kt

@@ -21,8 +21,10 @@ import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.togetherWith
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.hoverable
@@ -61,10 +63,10 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawWithCache
+import androidx.compose.ui.focus.focusModifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalWindowInfo
@@ -84,13 +86,14 @@ import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.common.Thumbnail
 import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.track.MetadataTrack
 import dev.krtirtho.spotube.core.ui.base.ButtonGroup
 import dev.krtirtho.spotube.core.ui.base.ButtonGroupDivider
-import dev.krtirtho.spotube.core.ui.base.Card
 import dev.krtirtho.spotube.core.ui.base.CheckBox
 import dev.krtirtho.spotube.core.ui.base.CheckBoxState
 import dev.krtirtho.spotube.core.ui.base.GhostIconButton
 import dev.krtirtho.spotube.core.ui.base.GroupIconButton
-import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
+import dev.krtirtho.spotube.core.ui.base.IconButton
 import dev.krtirtho.spotube.core.ui.base.TextField
+import dev.krtirtho.spotube.core.ui.base.buttonShadow
+import dev.krtirtho.spotube.core.ui.base.rememberButtonColors
 import dev.krtirtho.spotube.core.ui.misc.SkeletonTree
 import dev.krtirtho.spotube.core.ui.misc.TextWithShimmer
 import dev.krtirtho.spotube.core.ui.misc.shimmerApply
@@ -345,10 +348,25 @@ fun TrackList(
                 }
 
             item(key = "track-card") {
-                Card(
+                val colors = rememberButtonColors()
+                val trackListShape = MaterialTheme.shapes.large
+
+                Box(
                     modifier = Modifier
                         .fillMaxWidth()
-                        .padding(vertical = 8.dp),
+                        .padding(vertical = 8.dp)
+                        .then(
+                            buttonShadow(
+                                trackListShape,
+                                pressed = false,
+                                primary = false,
+                                colors,
+                                hovered = false
+                            )
+                        )
+                        .clip(trackListShape)
+                        .background(MaterialTheme.colorScheme.surfaceContainer, trackListShape)
+                        .border(BorderStroke(0.5.dp, colors.border), trackListShape)
                 ) {
                     Column(
                         modifier = Modifier
@@ -514,21 +532,17 @@ private fun TrackListRow(
     onArtistsOverflowClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    val rowTheme = LocalBaseUITheme.current.listRowTile
+    val rowColors = rememberButtonColors()
-    val isLight = MaterialTheme.colorScheme.surface.luminance() > 0.5f
     val artworkInteractionSource = remember { MutableInteractionSource() }
     val isArtworkHovered by artworkInteractionSource.collectIsHoveredAsState()
     val rowInteractionSource = remember { MutableInteractionSource() }
     val isRowHovered by rowInteractionSource.collectIsHoveredAsState()
     val rowBackgroundColor = when {
-        isSelected -> rowTheme.background.selected
+        isSelected -> MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f)
-        isCurrentTrack && isCurrentTrackPlaying -> rowTheme.background.hovered
+        isCurrentTrack && isCurrentTrackPlaying -> MaterialTheme.colorScheme.primary.copy(alpha = 0.14f)
-        isCurrentTrack -> rowTheme.background.focused
+        isCurrentTrack -> MaterialTheme.colorScheme.onSurface.copy(alpha = 0.06f)
-        else -> Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent))
+        else -> Color.Transparent
     }
-    val highlightColor = Color.White.copy(
-        alpha = if (isLight) 0.9f else 0.06f
-    )
 
     Row(
         modifier = modifier
@@ -541,7 +555,7 @@ private fun TrackListRow(
             .background(rowBackgroundColor)
             .drawWithCache {
                 val highlightBrush = Brush.verticalGradient(
-                    colors = listOf(highlightColor, Color.Transparent),
+                    colors = listOf(rowColors.highlight, Color.Transparent),
                     startY = 0f,
                     endY = size.height * 0.5f,
                 )

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/cards/PlayableCard.kt

@@ -33,9 +33,9 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
+import dev.krtirtho.spotube.core.ui.base.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
@@ -49,16 +49,14 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import coil3.compose.AsyncImage
-import dev.krtirtho.spotube.core.ui.base.BaseUITheme
-import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
 import dev.krtirtho.spotube.core.ui.base.PrimaryIconButton
 import dev.krtirtho.spotube.core.ui.base.SecondaryIconButton
 import dev.krtirtho.spotube.core.ui.misc.TextWithShimmer
 import dev.krtirtho.spotube.core.ui.misc.shimmerApply
 import dev.krtirtho.spotube.resources.iconsax.Iconsax
 import dev.krtirtho.spotube.resources.iconsax.IconsaxAddSquare
-import dev.krtirtho.spotube.resources.iconsax.IconsaxPause
+import dev.krtirtho.spotube.resources.iconsax.IconsaxPauseCircle
-import dev.krtirtho.spotube.resources.iconsax.IconsaxPlay
+import dev.krtirtho.spotube.resources.iconsax.Play
 
 @Composable
 fun PlayableCard(
@@ -110,11 +108,7 @@ fun PlayableCard(
                                     SecondaryIconButton(
                                         onClick = onAddToQueue,
                                         modifier = Modifier.size(30.dp),
-                                        theme = LocalBaseUITheme.current.iconButtons.secondary.copy(
+                                        shape = RoundedCornerShape(6.dp)
-                                            shape = BaseUITheme.InteractionState.fromSingleValue(
-                                                CircleShape
-                                            )
-                                        )
                                     ) {
                                         Icon(
                                             imageVector = Iconsax.IconsaxAddSquare,
@@ -127,17 +121,12 @@ fun PlayableCard(
                                     PrimaryIconButton(
                                         onClick = onPlay,
                                         modifier = Modifier.size(30.dp),
-                                        theme = LocalBaseUITheme.current.iconButtons.secondary.copy(
+                                        shape = RoundedCornerShape(6.dp)
-                                            shape = BaseUITheme.InteractionState.fromSingleValue(
-                                                CircleShape
-                                            )
-                                        )
-
                                     ) {
                                         Icon(
                                             imageVector = if (isPlaying) {
-                                                Iconsax.IconsaxPause
+                                                Iconsax.IconsaxPauseCircle
-                                            } else Iconsax.IconsaxPlay,
+                                            } else Iconsax.Play,
                                             contentDescription = "Play",
                                         )
                                     }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppExpandedPlayer.kt

@@ -83,13 +83,10 @@ import dev.krtirtho.spotube.core.audioplayer.LoopState
 import dev.krtirtho.spotube.core.audioplayer.QueueEntry
 import dev.krtirtho.spotube.core.navigation.NavigationCommands
 import dev.krtirtho.spotube.core.navigation.Routes
-import dev.krtirtho.spotube.core.ui.base.BaseUITheme
 import dev.krtirtho.spotube.core.ui.base.GhostIconButton
 import dev.krtirtho.spotube.core.ui.base.IconButton
-import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
 import dev.krtirtho.spotube.core.ui.base.Slider
-import dev.krtirtho.spotube.core.ui.base.copyShape
+import dev.krtirtho.spotube.core.ui.base.rememberButtonColors
-import dev.krtirtho.spotube.core.ui.base.invertedButtonStyle
 import dev.krtirtho.spotube.modules.downloads.DownloadProgressIcon
 import dev.krtirtho.spotube.modules.downloads.DownloadStatus
 import dev.krtirtho.spotube.modules.downloads.DownloadsViewModel
@@ -469,10 +466,7 @@ fun AppExpandedPlayer(
                         textAlign = TextAlign.Center,
                     )
                 }
-                IconButton(
+                IconButton(onClick = onQueue, shape = CircleShape) {
-                    onClick = onQueue,
-                    theme = LocalBaseUITheme.current.iconButtons.outline.copyShape(CircleShape)
-                ) {
                     Icon(Iconsax.IconsaxMusicFilter, contentDescription = "Queue")
                 }
             }
@@ -532,14 +526,20 @@ fun AppExpandedPlayer(
                     }
                     IconButton(
                         onClick = ::onPlayPause,
-                        theme = invertedButtonStyle().copyShape(CircleShape),
+                        colors = rememberButtonColors().copy(
+                            containerDarker = MaterialTheme.colorScheme.onSurface,
+                            containerLighter = MaterialTheme.colorScheme.onSurface,
+                            containerPressed = MaterialTheme.colorScheme.onSurfaceVariant,
+                        ),
                         modifier = Modifier
                             .size(72.dp),
+                        shape = CircleShape,
                     ) {
                         Icon(
                             if (playerUiState.isPlaying) Iconsax.IconsaxPause else Iconsax.IconsaxPlay,
                             contentDescription = if (playerUiState.isPlaying) "Pause" else "Play",
                             modifier = Modifier.size(30.dp),
+                            tint = MaterialTheme.colorScheme.surface,
                         )
                     }
                     GhostIconButton(onClick = ::onSkipNext) {

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppLargePlayer.kt

@@ -28,7 +28,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -55,12 +54,9 @@ import dev.krtirtho.spotube.core.audioplayer.AudioPlayerQueue
 import dev.krtirtho.spotube.core.audioplayer.LoopState
 import dev.krtirtho.spotube.core.audioplayer.QueueEntry
 import dev.krtirtho.spotube.core.ui.base.GhostIconButton
-import dev.krtirtho.spotube.core.ui.base.IconButton
 import dev.krtirtho.spotube.core.ui.base.Slider
 import dev.krtirtho.spotube.core.ui.base.VariableIconButton
 import dev.krtirtho.spotube.core.ui.base.VariableIconButtonVariant
-import dev.krtirtho.spotube.core.ui.base.copyShape
-import dev.krtirtho.spotube.core.ui.base.invertedButtonStyle
 import dev.krtirtho.spotube.modules.downloads.DownloadProgressIcon
 import dev.krtirtho.spotube.modules.downloads.DownloadsViewModel
 import dev.krtirtho.spotube.modules.saved_tracks.SAVED_TRACKS_COLLECTION_ID
@@ -278,12 +274,7 @@ fun AppLargePlayer(
                     GhostIconButton(onClick = ::onSkipPrevious) {
                         Icon(Iconsax.IconsaxPrevious, contentDescription = "Previous")
                     }
-                    IconButton(
+                    GhostIconButton(onClick = ::onPlayPause, modifier = Modifier.size(44.dp)) {
-                        onClick = ::onPlayPause,
-                        theme = invertedButtonStyle().copyShape(CircleShape),
-                        modifier = Modifier
-                            .size(50.dp),
-                    ) {
                         Icon(
                             if (playerUiState.isPlaying) Iconsax.IconsaxPause else Iconsax.IconsaxPlay,
                             contentDescription = if (playerUiState.isPlaying) "Pause" else "Play or pause",

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppSidebar.kt

@@ -21,8 +21,14 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.hoverable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsHoveredAsState
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -36,26 +42,34 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawWithCache
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.unit.dp
 import dev.krtirtho.spotube.core.navigation.NavigationState
 import dev.krtirtho.spotube.core.navigation.Navigator
 import dev.krtirtho.spotube.core.navigation.Routes
-import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
-import dev.krtirtho.spotube.core.ui.base.OutlineButton
 import dev.krtirtho.spotube.core.ui.base.SecondaryButton
-import dev.krtirtho.spotube.core.ui.base.copyPadding
+import dev.krtirtho.spotube.core.ui.base.buttonShadow
+import dev.krtirtho.spotube.core.ui.base.outlinedGradient
+import dev.krtirtho.spotube.core.ui.base.rememberButtonColors
 import dev.krtirtho.spotube.modules.downloads.DownloadBadgeIndicator
 import dev.krtirtho.spotube.modules.library.LibraryState
 import dev.krtirtho.spotube.modules.library.LibraryTab
@@ -201,16 +215,66 @@ fun SidebarItem(
         SecondaryButton(
             onClick = onClick,
             modifier = buttonModifier,
-            theme = LocalBaseUITheme.current.buttons.secondary.copyPadding(contentPadding),
+            contentPadding = contentPadding,
             content = itemContent,
         )
     } else {
-        OutlineButton(
+        val colors = rememberButtonColors()
+        val interactionSource = remember { MutableInteractionSource() }
+        val isHovered by interactionSource.collectIsHoveredAsState()
+        val isPressed by interactionSource.collectIsPressedAsState()
+        val gradient = outlinedGradient(colors, isPressed)
+        val border = colors.border.copy(alpha = if (isPressed) 0.7f else 1f)
+        val lift = if (isHovered && !isPressed) (-1).dp else 0.dp
+        val shape = RoundedCornerShape(14.dp)
+
+        Box(
+            modifier = buttonModifier
+                .hoverable(interactionSource = interactionSource)
+                .graphicsLayer { translationY = lift.toPx() }
+                .clip(shape)
+                .then(
+                    if (isHovered || isPressed) {
+                        buttonShadow(
+                            shape,
+                            isPressed,
+                            primary = false,
+                            colors,
+                            hovered = isHovered
+                        ).background(gradient, shape)
+                            .border(BorderStroke(0.5.dp, border), shape)
+                            .drawWithCache {
+                                val highlightBrush = Brush.verticalGradient(
+                                    colors = listOf(colors.highlight, Color.Transparent),
+                                    startY = 0f,
+                                    endY = size.height * 0.5f,
+                                )
+                                onDrawWithContent {
+                                    drawContent()
+                                    drawRect(
+                                        brush = highlightBrush,
+                                        topLeft = androidx.compose.ui.geometry.Offset.Zero,
+                                        size = size,
+                                    )
+                                }
+                            }
+                    } else {
+                        Modifier
+                    }
+                )
+                .clickable(
+                    interactionSource = interactionSource,
+                    indication = ripple(),
                     onClick = onClick,
-            modifier = buttonModifier,
+                )
-            theme = LocalBaseUITheme.current.buttons.outline.copyPadding(contentPadding),
+                .padding(contentPadding),
-            hoverOnly = true,
+            contentAlignment = Alignment.Center,
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
                 content = itemContent,
             )
         }
     }
+}

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/PlayerHeartButton.kt

@@ -27,8 +27,6 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import dev.krtirtho.spotube.core.audioplayer.AudioPlayerQueue
 import dev.krtirtho.spotube.core.audioplayer.QueueEntry
 import dev.krtirtho.spotube.core.ui.base.IconButton
-import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
-import dev.krtirtho.spotube.core.ui.base.copyShape
 import dev.krtirtho.spotube.modules.saved_tracks.SavedState
 import dev.krtirtho.spotube.modules.saved_tracks.SavedTracksViewModel
 import dev.krtirtho.spotube.modules.saved_tracks.rememberIsSavedTracks
@@ -71,7 +69,7 @@ fun PlayerHeartButton(
     IconButton(
         onClick = ::onLike,
         enabled = isSavedTrackState is SavedState.Success,
-        theme = LocalBaseUITheme.current.iconButtons.outline.copyShape(CircleShape),
+        shape = CircleShape,
     ) {
         Icon(
             imageVector = if (isLiked) Iconsax.IconsaxHeart2 else Iconsax.IconsaxHeart,

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/player_queue/PlayerQueueContent.kt

@@ -37,19 +37,21 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.FilledTonalIconButton
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -61,11 +63,7 @@ import compose.icons.FeatherIcons
 import compose.icons.feathericons.MoreVertical
 import dev.krtirtho.spotube.core.audioplayer.QueueEntry
 import dev.krtirtho.spotube.core.di.rememberLogger
-import dev.krtirtho.spotube.core.ui.base.GhostIconButton
-import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
-import dev.krtirtho.spotube.core.ui.base.SecondaryIconButton
 import dev.krtirtho.spotube.core.ui.base.TextField
-import dev.krtirtho.spotube.core.ui.base.copyShape
 import dev.krtirtho.spotube.resources.iconsax.Iconsax
 import dev.krtirtho.spotube.resources.iconsax.IconsaxFilterSearch
 import dev.krtirtho.spotube.resources.iconsax.IconsaxMusicSquareRemove
@@ -188,9 +186,9 @@ fun PlayerQueueContent(
                     singleLine = true,
                     modifier = Modifier.weight(1f),
                 )
-                SecondaryIconButton(
+                FilledTonalIconButton(
                     onClick = viewModel::clearQueue,
-                    theme = LocalBaseUITheme.current.iconButtons.secondary.copyShape(MaterialTheme.shapes.small),
+                    shape = MaterialTheme.shapes.small,
                 ) {
                     Icon(Iconsax.IconsaxTrash, contentDescription = "Clear Queue")
                 }
@@ -335,7 +333,7 @@ private fun QueueItemRow(
             Spacer(modifier = Modifier.width(4.dp))
 
             Box {
-                GhostIconButton(
+                IconButton(
                     onClick = { showMenu = true },
                     modifier = Modifier.size(36.dp),
                 ) {