From dadc302ef0d3b5ec648426e7065ee4898e21add9 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Sun, 5 Jul 2026 19:27:49 +0600 Subject: [PATCH] feat: enhance button styles and interactions in Buttons and Theme components for improved UI consistency --- .../krtirtho/spotube/core/ui/base/Buttons.kt | 60 +- .../krtirtho/spotube/core/ui/base/Theme.kt | 942 +----------------- .../spotube/core/ui/component/TrackList.kt | 4 +- 3 files changed, 61 insertions(+), 945 deletions(-) diff --git a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Buttons.kt b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Buttons.kt index 3e4e9654..3677ebbf 100644 --- a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Buttons.kt +++ b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Buttons.kt @@ -168,7 +168,11 @@ fun OutlineButton( Row( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), - content = content, + content = { + CompositionLocalProvider(LocalContentColor provides state.colors.foreground) { + content() + } + }, ) } } @@ -320,30 +324,36 @@ fun GhostIconButton( content: @Composable () -> Unit, ) { val baseTheme = LocalBaseUITheme.current - val style = theme ?: baseTheme.buttons.ghost - val interactionSource = remember { MutableInteractionSource() } - val isPressed by interactionSource.collectIsPressedAsState() - val isHovered by interactionSource.collectIsHoveredAsState() - val state = resolveButtonState(style, isPressed, isHovered) - val lift = if (isHovered && !isPressed) (-1).dp else 0.dp - - Box( - modifier = modifier - .defaultMinSize(minHeight = ButtonMinHeight) - .hoverable(interactionSource = interactionSource, enabled = enabled) - .graphicsLayer { translationY = lift.toPx() } - .clip(state.shape) - .then( - if (!isHovered && !isPressed) Modifier else Modifier.background(state.colors.background, state.shape) - ) - .clickable( - enabled = enabled, - interactionSource = interactionSource, - indication = ripple(), - onClick = onClick, - ) - .padding(state.padding), - contentAlignment = Alignment.Center, + 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, + hoverOnly = true, + theme = ghostStyle, ) { content() } diff --git a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Theme.kt b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Theme.kt index 5a1aef29..25a0f673 100644 --- a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Theme.kt +++ b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Theme.kt @@ -173,907 +173,11 @@ data class BaseUITheme( val selected: ButtonStyle, val unselected: ButtonStyle, ) - - companion object { - private val defaultShape = RoundedCornerShape(14.dp) - private val defaultShapeState = - InteractionState(defaultShape, defaultShape, defaultShape) - private val noBorder = Border(Color.Transparent, 0.dp) - private val noBorderState = InteractionState(noBorder, noBorder, noBorder) - private val noShadow = Shadow(0.dp, false, Color.Transparent, Color.Transparent) - private val noShadowState = InteractionState(noShadow, noShadow, noShadow) - private val defaultButtonPadding = InteractionState( - PaddingValues(horizontal = 20.dp, vertical = 10.dp), - PaddingValues(horizontal = 20.dp, vertical = 10.dp), - PaddingValues(horizontal = 20.dp, vertical = 10.dp), - ) - private val iconButtonPadding = InteractionState( - PaddingValues(8.dp), - PaddingValues(8.dp), - PaddingValues(8.dp), - ) - - val Default: BaseUITheme = BaseUITheme( - buttons = ButtonVariants( - primary = ButtonStyle( - colors = InteractionState( - hovered = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFF1DB954), - Color(0xFF1ED760) - ) - ), - foreground = Color.White, - highlight = Color.White.copy(alpha = 0.25f), - ), - pressed = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFF1ED760).copy(alpha = 0.85f), - Color(0xFF1DB954) - ) - ), - foreground = Color.White, - highlight = Color.White.copy(alpha = 0.15f), - ), - focused = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFF1DB954), - Color(0xFF1ED760) - ) - ), - foreground = Color.White, - highlight = Color.White.copy(alpha = 0.25f), - ), - ), - shape = defaultShapeState, - shadow = InteractionState( - hovered = Shadow( - 9.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.45f), - Color(0xFF1DB954).copy(alpha = 0.5f) - ), - pressed = Shadow( - 1.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.2f), - Color(0xFF1DB954).copy(alpha = 0.25f) - ), - focused = Shadow( - 6.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.35f), - Color(0xFF1DB954).copy(alpha = 0.4f) - ), - ), - border = InteractionState( - hovered = Border(Color(0xFF1DB954), 0.5.dp), - pressed = Border(Color(0xFF1DB954), 0.5.dp), - focused = Border(Color(0xFF1DB954), 0.5.dp), - ), - padding = defaultButtonPadding, - ), - secondary = ButtonStyle( - colors = InteractionState( - hovered = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFE0E0E0), - Color(0xFFD0D0D0) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.5f), - ), - pressed = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFD0D0D0), - Color(0xFFC0C0C0) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.3f), - ), - focused = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFE0E0E0), - Color(0xFFD0D0D0) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.5f), - ), - ), - shape = defaultShapeState, - shadow = InteractionState( - hovered = Shadow( - 9.dp, - true, - Color.Black.copy(alpha = 0.22f), - Color.Black.copy(alpha = 0.26f) - ), - pressed = Shadow( - 1.dp, - true, - Color.Black.copy(alpha = 0.08f), - Color.Black.copy(alpha = 0.1f) - ), - focused = Shadow( - 6.dp, - true, - Color.Black.copy(alpha = 0.15f), - Color.Black.copy(alpha = 0.18f) - ), - ), - border = InteractionState( - hovered = Border(Color(0xFFE0E0E0).copy(alpha = 0.5f), 0.5.dp), - pressed = Border(Color(0xFFD0D0D0).copy(alpha = 0.5f), 0.5.dp), - focused = Border(Color(0xFFE0E0E0).copy(alpha = 0.5f), 0.5.dp), - ), - padding = defaultButtonPadding, - ), - outline = ButtonStyle( - colors = InteractionState( - hovered = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color.White, - Color(0xFFF2F2F4) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.9f), - ), - pressed = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFE0E0E3), - Color(0xFFE0E0E3) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.9f), - ), - focused = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color.White, - Color(0xFFF2F2F4) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.9f), - ), - ), - shape = defaultShapeState, - shadow = InteractionState( - hovered = Shadow( - 9.dp, - true, - Color.Black.copy(alpha = 0.22f), - Color.Black.copy(alpha = 0.26f) - ), - pressed = Shadow( - 1.dp, - true, - Color.Black.copy(alpha = 0.08f), - Color.Black.copy(alpha = 0.1f) - ), - focused = Shadow( - 6.dp, - true, - Color.Black.copy(alpha = 0.15f), - Color.Black.copy(alpha = 0.18f) - ), - ), - border = InteractionState( - hovered = Border(Color(0xFFCCCCCC), 0.5.dp), - pressed = Border(Color(0xFFCCCCCC).copy(alpha = 0.7f), 0.5.dp), - focused = Border(Color(0xFFCCCCCC), 0.5.dp), - ), - padding = defaultButtonPadding, - ), - ghost = ButtonStyle( - colors = InteractionState( - hovered = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFE0E0E3).copy(alpha = 0.5f), - Color(0xFFE0E0E3).copy(alpha = 0.5f) - ) - ), - foreground = Color.Black, - highlight = Color.Transparent, - ), - pressed = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFE0E0E3), - Color(0xFFE0E0E3) - ) - ), - foreground = Color.Black, - highlight = Color.Transparent, - ), - focused = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color.Transparent, - Color.Transparent - ) - ), - foreground = Color.Black, - highlight = Color.Transparent, - ), - ), - shape = defaultShapeState, - shadow = noShadowState, - border = noBorderState, - padding = defaultButtonPadding, - ), - ), - iconButtons = ButtonVariants( - primary = ButtonStyle( - colors = InteractionState( - hovered = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFF1DB954), - Color(0xFF1ED760) - ) - ), - foreground = Color.White, - highlight = Color.White.copy(alpha = 0.25f), - ), - pressed = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFF1ED760).copy(alpha = 0.85f), - Color(0xFF1DB954) - ) - ), - foreground = Color.White, - highlight = Color.White.copy(alpha = 0.15f), - ), - focused = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFF1DB954), - Color(0xFF1ED760) - ) - ), - foreground = Color.White, - highlight = Color.White.copy(alpha = 0.25f), - ), - ), - shape = defaultShapeState, - shadow = InteractionState( - hovered = Shadow( - 9.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.45f), - Color(0xFF1DB954).copy(alpha = 0.5f) - ), - pressed = Shadow( - 1.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.2f), - Color(0xFF1DB954).copy(alpha = 0.25f) - ), - focused = Shadow( - 6.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.35f), - Color(0xFF1DB954).copy(alpha = 0.4f) - ), - ), - border = InteractionState( - hovered = Border(Color(0xFF1DB954), 0.5.dp), - pressed = Border(Color(0xFF1DB954), 0.5.dp), - focused = Border(Color(0xFF1DB954), 0.5.dp), - ), - padding = iconButtonPadding, - ), - secondary = ButtonStyle( - colors = InteractionState( - hovered = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFE0E0E0), - Color(0xFFD0D0D0) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.5f), - ), - pressed = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFD0D0D0), - Color(0xFFC0C0C0) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.3f), - ), - focused = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFE0E0E0), - Color(0xFFD0D0D0) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.5f), - ), - ), - shape = defaultShapeState, - shadow = InteractionState( - hovered = Shadow( - 9.dp, - true, - Color.Black.copy(alpha = 0.22f), - Color.Black.copy(alpha = 0.26f) - ), - pressed = Shadow( - 1.dp, - true, - Color.Black.copy(alpha = 0.08f), - Color.Black.copy(alpha = 0.1f) - ), - focused = Shadow( - 6.dp, - true, - Color.Black.copy(alpha = 0.15f), - Color.Black.copy(alpha = 0.18f) - ), - ), - border = InteractionState( - hovered = Border(Color(0xFFE0E0E0).copy(alpha = 0.5f), 0.5.dp), - pressed = Border(Color(0xFFD0D0D0).copy(alpha = 0.5f), 0.5.dp), - focused = Border(Color(0xFFE0E0E0).copy(alpha = 0.5f), 0.5.dp), - ), - padding = iconButtonPadding, - ), - outline = ButtonStyle( - colors = InteractionState( - hovered = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color.White, - Color(0xFFF2F2F4) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.9f), - ), - pressed = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFE0E0E3), - Color(0xFFE0E0E3) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.9f), - ), - focused = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color.White, - Color(0xFFF2F2F4) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.9f), - ), - ), - shape = defaultShapeState, - shadow = InteractionState( - hovered = Shadow( - 9.dp, - true, - Color.Black.copy(alpha = 0.22f), - Color.Black.copy(alpha = 0.26f) - ), - pressed = Shadow( - 1.dp, - true, - Color.Black.copy(alpha = 0.08f), - Color.Black.copy(alpha = 0.1f) - ), - focused = Shadow( - 6.dp, - true, - Color.Black.copy(alpha = 0.15f), - Color.Black.copy(alpha = 0.18f) - ), - ), - border = InteractionState( - hovered = Border(Color(0xFFCCCCCC), 0.5.dp), - pressed = Border(Color(0xFFCCCCCC).copy(alpha = 0.7f), 0.5.dp), - focused = Border(Color(0xFFCCCCCC), 0.5.dp), - ), - padding = iconButtonPadding, - ), - ghost = ButtonStyle( - colors = InteractionState( - hovered = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFE0E0E3).copy(alpha = 0.5f), - Color(0xFFE0E0E3).copy(alpha = 0.5f) - ) - ), - foreground = Color.Black, - highlight = Color.Transparent, - ), - pressed = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFE0E0E3), - Color(0xFFE0E0E3) - ) - ), - foreground = Color.Black, - highlight = Color.Transparent, - ), - focused = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color.Transparent, - Color.Transparent - ) - ), - foreground = Color.Black, - highlight = Color.Transparent, - ), - ), - shape = defaultShapeState, - shadow = noShadowState, - border = noBorderState, - padding = iconButtonPadding, - ), - ), - textField = TextFieldTheme( - background = InteractionState( - hovered = Brush.verticalGradient(listOf(Color(0xFFF5F5F5), Color(0xFFE8E8E8))), - pressed = Brush.verticalGradient(listOf(Color.White, Color(0xFFF2F2F4))), - focused = Brush.verticalGradient(listOf(Color.White, Color(0xFFF2F2F4))), - ), - highlight = InteractionState( - hovered = Color.White.copy(alpha = 0.9f), - pressed = Color.White.copy(alpha = 0.9f), - focused = Color.White.copy(alpha = 0.9f), - ), - shape = InteractionState( - hovered = defaultShape, - pressed = defaultShape, - focused = defaultShape, - ), - border = InteractionState( - hovered = Border(Color(0xFFCCCCCC).copy(alpha = 0.85f), 0.5.dp), - pressed = Border(Color(0xFFCCCCCC), 0.5.dp), - focused = Border(Color(0xFF1DB954), 0.5.dp), - ), - shadow = InteractionState( - hovered = Shadow( - 9.dp, - true, - Color.Black.copy(alpha = 0.22f), - Color.Black.copy(alpha = 0.26f) - ), - pressed = Shadow( - 6.dp, - true, - Color.Black.copy(alpha = 0.15f), - Color.Black.copy(alpha = 0.18f) - ), - focused = Shadow( - 9.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.2f), - Color(0xFF1DB954).copy(alpha = 0.25f) - ), - ), - padding = PaddingValues(horizontal = 14.dp, vertical = 10.dp), - textStyle = TextStyle.Default, - cursor = SolidColor(Color(0xFF1DB954)), - foreground = InteractionState( - hovered = Color.Black, - pressed = Color.Black, - focused = Color.Black, - ), - ), - autoCompleteMenuTheme = AutoCompleteMenuTheme( - background = Brush.verticalGradient(listOf(Color(0xFFF5F5F5), Color(0xFFE8E8E8))), - shape = RoundedCornerShape(12.dp), - border = Border(Color(0xFFCCCCCC), 0.5.dp), - padding = PaddingValues(0.dp), - shadowElevation = 8.dp, - ), - slider = SliderTheme( - trackActiveColor = InteractionState( - hovered = Color(0xFF1DB954), - pressed = Color(0xFF1DB954), - focused = Color(0xFF1DB954), - ), - trackInactiveColor = InteractionState( - hovered = Color(0xFFCCCCCC).copy(alpha = 0.6f), - pressed = Color(0xFFCCCCCC).copy(alpha = 0.6f), - focused = Color(0xFFCCCCCC).copy(alpha = 0.6f), - ), - thumbColor = InteractionState( - hovered = Color(0xFF1DB954), - pressed = Color(0xFF1DB954), - focused = Color(0xFF1DB954), - ), - thumbShadow = InteractionState( - hovered = Shadow( - 8.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.4f), - Color(0xFF1DB954).copy(alpha = 0.5f) - ), - pressed = Shadow( - 2.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.2f), - Color(0xFF1DB954).copy(alpha = 0.25f) - ), - focused = Shadow( - 5.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.35f), - Color(0xFF1DB954).copy(alpha = 0.4f) - ), - ), - stepActiveColor = Color.White.copy(alpha = 0.5f), - stepInactiveColor = Color.Black.copy(alpha = 0.25f), - ), - checkBox = CheckBoxTheme( - selected = ButtonStyle( - colors = InteractionState( - hovered = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFF1DB954), - Color(0xFF1ED760) - ) - ), - foreground = Color.White, - highlight = Color.White.copy(alpha = 0.25f), - ), - pressed = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFF1ED760).copy(alpha = 0.85f), - Color(0xFF1DB954) - ) - ), - foreground = Color.White, - highlight = Color.White.copy(alpha = 0.15f), - ), - focused = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFF1DB954), - Color(0xFF1ED760) - ) - ), - foreground = Color.White, - highlight = Color.White.copy(alpha = 0.25f), - ), - ), - shape = InteractionState( - RoundedCornerShape(6.dp), - RoundedCornerShape(6.dp), - RoundedCornerShape(6.dp) - ), - shadow = InteractionState( - hovered = Shadow( - 8.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.4f), - Color(0xFF1DB954).copy(alpha = 0.45f) - ), - pressed = Shadow( - 1.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.2f), - Color(0xFF1DB954).copy(alpha = 0.25f) - ), - focused = Shadow( - 6.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.3f), - Color(0xFF1DB954).copy(alpha = 0.35f) - ), - ), - border = InteractionState( - hovered = Border(Color(0xFF1DB954), 0.5.dp), - pressed = Border(Color(0xFF1DB954), 0.5.dp), - focused = Border(Color(0xFF1DB954), 0.5.dp), - ), - padding = InteractionState( - PaddingValues(0.dp), - PaddingValues(0.dp), - PaddingValues(0.dp) - ), - ), - unselected = ButtonStyle( - colors = InteractionState( - hovered = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color.White, - Color(0xFFF2F2F4) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.9f), - ), - pressed = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFE0E0E3), - Color(0xFFE0E0E3) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.9f), - ), - focused = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color.White, - Color(0xFFF2F2F4) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.9f), - ), - ), - shape = InteractionState( - RoundedCornerShape(6.dp), - RoundedCornerShape(6.dp), - RoundedCornerShape(6.dp) - ), - shadow = InteractionState( - hovered = Shadow( - 5.dp, - true, - Color.Black.copy(alpha = 0.2f), - Color.Black.copy(alpha = 0.24f) - ), - pressed = Shadow( - 1.dp, - true, - Color.Black.copy(alpha = 0.08f), - Color.Black.copy(alpha = 0.1f) - ), - focused = Shadow( - 3.dp, - true, - Color.Black.copy(alpha = 0.15f), - Color.Black.copy(alpha = 0.18f) - ), - ), - border = InteractionState( - hovered = Border(Color(0xFFCCCCCC), 0.5.dp), - pressed = Border(Color(0xFFCCCCCC), 0.5.dp), - focused = Border(Color(0xFFCCCCCC), 0.5.dp), - ), - padding = InteractionState( - PaddingValues(0.dp), - PaddingValues(0.dp), - PaddingValues(0.dp) - ), - ), - checkmarkColor = Color.White, - ), - chipTab = ChipTabTheme( - selected = ButtonStyle( - colors = InteractionState( - hovered = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFF1DB954), - Color(0xFF1ED760) - ) - ), - foreground = Color.White, - highlight = Color.White.copy(alpha = 0.25f), - ), - pressed = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFF1ED760).copy(alpha = 0.85f), - Color(0xFF1DB954) - ) - ), - foreground = Color.White, - highlight = Color.White.copy(alpha = 0.15f), - ), - focused = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFF1DB954), - Color(0xFF1ED760) - ) - ), - foreground = Color.White, - highlight = Color.White.copy(alpha = 0.25f), - ), - ), - shape = InteractionState( - RoundedCornerShape(10.dp), - RoundedCornerShape(10.dp), - RoundedCornerShape(10.dp) - ), - shadow = InteractionState( - hovered = Shadow( - 9.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.45f), - Color(0xFF1DB954).copy(alpha = 0.5f) - ), - pressed = Shadow( - 1.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.2f), - Color(0xFF1DB954).copy(alpha = 0.25f) - ), - focused = Shadow( - 6.dp, - true, - Color(0xFF1DB954).copy(alpha = 0.35f), - Color(0xFF1DB954).copy(alpha = 0.4f) - ), - ), - border = InteractionState( - hovered = Border(Color(0xFF1DB954), 0.5.dp), - pressed = Border(Color(0xFF1DB954), 0.5.dp), - focused = Border(Color(0xFF1DB954), 0.5.dp), - ), - padding = InteractionState( - PaddingValues(horizontal = 14.dp, vertical = 4.dp), - PaddingValues(horizontal = 14.dp, vertical = 4.dp), - PaddingValues(horizontal = 14.dp, vertical = 4.dp), - ), - ), - unselected = ButtonStyle( - colors = InteractionState( - hovered = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color.White, - Color(0xFFF2F2F4) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.9f), - ), - pressed = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color(0xFFE0E0E3), - Color(0xFFE0E0E3) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.9f), - ), - focused = ButtonColors( - background = Brush.verticalGradient( - listOf( - Color.White, - Color(0xFFF2F2F4) - ) - ), - foreground = Color.Black, - highlight = Color.White.copy(alpha = 0.9f), - ), - ), - shape = InteractionState( - RoundedCornerShape(10.dp), - RoundedCornerShape(10.dp), - RoundedCornerShape(10.dp) - ), - shadow = InteractionState( - hovered = Shadow( - 9.dp, - true, - Color.Black.copy(alpha = 0.22f), - Color.Black.copy(alpha = 0.26f) - ), - pressed = Shadow( - 1.dp, - true, - Color.Black.copy(alpha = 0.08f), - Color.Black.copy(alpha = 0.1f) - ), - focused = Shadow( - 6.dp, - true, - Color.Black.copy(alpha = 0.15f), - Color.Black.copy(alpha = 0.18f) - ), - ), - border = InteractionState( - hovered = Border(Color(0xFFCCCCCC), 0.5.dp), - pressed = Border(Color(0xFFCCCCCC).copy(alpha = 0.7f), 0.5.dp), - focused = Border(Color(0xFFCCCCCC), 0.5.dp), - ), - padding = InteractionState( - PaddingValues(horizontal = 14.dp, vertical = 4.dp), - PaddingValues(horizontal = 14.dp, vertical = 4.dp), - PaddingValues(horizontal = 14.dp, vertical = 4.dp), - ), - ), - ), - card = CardTheme( - background = Brush.verticalGradient(listOf(Color.White, Color(0xFFF2F2F4))), - shape = RoundedCornerShape(16.dp), - border = Border(Color(0xFFCCCCCC), 0.5.dp), - padding = PaddingValues(12.dp), - shadow = Shadow(6.dp, true, Color.Black.copy(alpha = 0.15f), Color.Black.copy(alpha = 0.18f)), - ), - listRowTile = ListRowTheme( - background = AdvancedInteractionState( - hovered = Brush.verticalGradient(listOf(Color.White, Color(0xFFF2F2F4))), - pressed = Brush.verticalGradient(listOf(Color(0xFFE0E0E3), Color(0xFFE0E0E3))), - focused = Brush.verticalGradient(listOf(Color.White, Color(0xFFF2F2F4))), - selected = Brush.verticalGradient(listOf(Color(0xFF1DB954).copy(alpha = 0.14f), Color(0xFF1DB954).copy(alpha = 0.14f))), - disabled = Brush.verticalGradient(listOf(Color(0xFFF5F5F5), Color(0xFFF5F5F5))), - ), - shape = AdvancedInteractionState( - hovered = RoundedCornerShape(8.dp), - pressed = RoundedCornerShape(8.dp), - focused = RoundedCornerShape(8.dp), - selected = RoundedCornerShape(8.dp), - disabled = RoundedCornerShape(8.dp), - ), - border = AdvancedInteractionState( - hovered = Border(Color.Transparent, 0.dp), - pressed = Border(Color.Transparent, 0.dp), - focused = Border(Color.Transparent, 0.dp), - selected = Border(Color.Transparent, 0.dp), - disabled = Border(Color.Transparent, 0.dp), - ), - shadow = AdvancedInteractionState( - hovered = Shadow(0.dp, false, Color.Transparent, Color.Transparent), - pressed = Shadow(0.dp, false, Color.Transparent, Color.Transparent), - focused = Shadow(0.dp, false, Color.Transparent, Color.Transparent), - selected = Shadow(0.dp, false, Color.Transparent, Color.Transparent), - disabled = Shadow(0.dp, false, Color.Transparent, Color.Transparent), - ), - padding = PaddingValues(horizontal = 8.dp, vertical = 6.dp), - textStyle = AdvancedInteractionState( - hovered = TextStyle.Default, - pressed = TextStyle.Default, - focused = TextStyle.Default, - selected = TextStyle.Default, - disabled = TextStyle.Default, - ), - foreground = AdvancedInteractionState( - hovered = Color.Black, - pressed = Color.Black, - focused = Color.Black, - selected = Color.Black, - disabled = Color.Black.copy(alpha = 0.38f), - ), - ), - ) - } } -val LocalBaseUITheme = staticCompositionLocalOf { BaseUITheme.Default } +val LocalBaseUITheme = staticCompositionLocalOf { + throw IllegalStateException("No BaseUITheme provided") +} @Composable fun rememberBaseUITheme(): BaseUITheme { @@ -1084,7 +188,7 @@ fun rememberBaseUITheme(): BaseUITheme { 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.copy(alpha = 0.12f) + val shadowColor = scheme.onSurface val border = scheme.outlineVariant val secondaryContainer = scheme.secondaryContainer @@ -1131,20 +235,20 @@ fun rememberBaseUITheme(): BaseUITheme { hovered = BaseUITheme.Shadow( 9.dp, true, - shadowColor.copy(alpha = 0.22f / 0.12f), - shadowColor.copy(alpha = 0.26f / 0.12f) + shadowColor.copy(alpha = 0.22f), + shadowColor.copy(alpha = 0.26f) ), pressed = BaseUITheme.Shadow( 1.dp, true, - shadowColor.copy(alpha = 0.08f / 0.12f), - shadowColor.copy(alpha = 0.1f / 0.12f) + shadowColor.copy(alpha = 0.08f), + shadowColor.copy(alpha = 0.1f) ), focused = BaseUITheme.Shadow( 6.dp, true, - shadowColor.copy(alpha = 0.15f / 0.12f), - shadowColor.copy(alpha = 0.18f / 0.12f) + shadowColor.copy(alpha = 0.15f), + shadowColor.copy(alpha = 0.18f) ), ) val outlineBorder = BaseUITheme.InteractionState( @@ -1237,20 +341,20 @@ fun rememberBaseUITheme(): BaseUITheme { hovered = BaseUITheme.Shadow( 9.dp, true, - shadowColor.copy(alpha = 0.22f / 0.12f), - shadowColor.copy(alpha = 0.26f / 0.12f) + shadowColor.copy(alpha = 0.22f), + shadowColor.copy(alpha = 0.26f) ), pressed = BaseUITheme.Shadow( 1.dp, true, - shadowColor.copy(alpha = 0.08f / 0.12f), - shadowColor.copy(alpha = 0.1f / 0.12f) + shadowColor.copy(alpha = 0.08f), + shadowColor.copy(alpha = 0.1f) ), focused = BaseUITheme.Shadow( 6.dp, true, - shadowColor.copy(alpha = 0.15f / 0.12f), - shadowColor.copy(alpha = 0.18f / 0.12f) + shadowColor.copy(alpha = 0.15f), + shadowColor.copy(alpha = 0.18f) ), ) val secondaryBorder = BaseUITheme.InteractionState( @@ -1399,14 +503,14 @@ fun rememberBaseUITheme(): BaseUITheme { hovered = BaseUITheme.Shadow( 9.dp, true, - shadowColor.copy(alpha = 0.22f / 0.12f), - shadowColor.copy(alpha = 0.26f / 0.12f) + shadowColor.copy(alpha = 0.22f), + shadowColor.copy(alpha = 0.26f) ), pressed = BaseUITheme.Shadow( 6.dp, true, - shadowColor.copy(alpha = 0.15f / 0.12f), - shadowColor.copy(alpha = 0.18f / 0.12f) + shadowColor.copy(alpha = 0.15f), + shadowColor.copy(alpha = 0.18f) ), focused = BaseUITheme.Shadow( 9.dp, @@ -1546,8 +650,8 @@ fun rememberBaseUITheme(): BaseUITheme { background = Brush.verticalGradient(listOf(containerLighter, containerDarker)), shape = RoundedCornerShape(16.dp), border = BaseUITheme.Border(border, 0.5.dp), - padding = PaddingValues(12.dp), - shadow = BaseUITheme.Shadow(6.dp, true, shadowColor.copy(alpha = 0.15f / 0.12f), shadowColor.copy(alpha = 0.18f / 0.12f)), + 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( @@ -1618,7 +722,7 @@ fun BaseUITheme.ButtonStyle.copyColors(colors: BaseUITheme.ButtonColors): BaseUI fun invertedButtonStyle(): BaseUITheme.ButtonStyle { val scheme = MaterialTheme.colorScheme val isLight = scheme.surface.luminance() > 0.5f - val shadowColor = scheme.onSurface.copy(alpha = 0.12f) + val shadowColor = scheme.onSurface val invertedColors = BaseUITheme.ButtonColors( background = Brush.verticalGradient(listOf(scheme.onSurface, scheme.onSurface)), diff --git a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/TrackList.kt b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/TrackList.kt index b9146d6f..506e2a3a 100644 --- a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/TrackList.kt +++ b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/TrackList.kt @@ -353,6 +353,7 @@ fun TrackList( Column( modifier = Modifier .fillMaxWidth() + .padding(top = 12.dp, bottom = 12.dp) ) { visibleTracks.forEachIndexed { displayedIndex, track -> if (displayedIndex > 0) { @@ -514,6 +515,7 @@ private fun TrackListRow( modifier: Modifier = Modifier, ) { val rowTheme = LocalBaseUITheme.current.listRowTile + val isLight = MaterialTheme.colorScheme.surface.luminance() > 0.5f val artworkInteractionSource = remember { MutableInteractionSource() } val isArtworkHovered by artworkInteractionSource.collectIsHoveredAsState() val rowInteractionSource = remember { MutableInteractionSource() } @@ -525,7 +527,7 @@ private fun TrackListRow( else -> Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent)) } val highlightColor = Color.White.copy( - alpha = if (rowTheme.foreground.hovered.luminance() > 0.5f) 0.9f else 0.06f + alpha = if (isLight) 0.9f else 0.06f ) Row(