From 588827dca57eabe87175f01115c1cc1ff1cb952c Mon Sep 17 00:00:00 2001 From: Sebastiano Poggi Date: Mon, 1 Jul 2024 11:27:54 +0200 Subject: [PATCH] Fix default button focus outline & chip colors * The default button was missing spacing between its bg and the focus outline. Outlined buttons are unaffected. * The chips were drawing a double-outline when focused and selected. Now they only draw the selected outline if they are both focused and selected. * The chips didn't clearly signal the pressed and selected states. The background now reflects these states better (standalone only). There are no specs so we're going with a bit more freedom in the standalone version, as the Swing impl is quite lacking in polish still --- .../jewel/bridge/theme/IntUiBridge.kt | 2 ++ .../api/int-ui-standalone.api | 8 +++--- .../standalone/styling/IntUiButtonStyling.kt | 6 ++-- .../standalone/styling/IntUiChipStyling.kt | 28 +++++++++---------- ui/api/ui.api | 7 +++-- .../kotlin/org/jetbrains/jewel/ui/Outline.kt | 6 ++-- .../jetbrains/jewel/ui/component/Button.kt | 8 +++--- .../org/jetbrains/jewel/ui/component/Chip.kt | 3 +- .../ui/component/styling/ButtonStyling.kt | 1 + 9 files changed, 39 insertions(+), 30 deletions(-) diff --git a/ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridge.kt b/ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridge.kt index ccb4bfd3c..ce060c865 100644 --- a/ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridge.kt +++ b/ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridge.kt @@ -283,6 +283,7 @@ private fun readDefaultButtonStyle(): ButtonStyle { padding = PaddingValues(horizontal = 14.dp), // see DarculaButtonUI.HORIZONTAL_PADDING minSize = DpSize(minimumSize.width, minimumSize.height), borderWidth = DarculaUIUtil.LW.dp, + focusOutlineExpand = 2.dp, ), ) } @@ -330,6 +331,7 @@ private fun readOutlinedButtonStyle(): ButtonStyle { padding = PaddingValues(horizontal = 14.dp), // see DarculaButtonUI.HORIZONTAL_PADDING minSize = DpSize(minimumSize.width, minimumSize.height), borderWidth = DarculaUIUtil.LW.dp, + focusOutlineExpand = Dp.Unspecified, ), ) } diff --git a/int-ui/int-ui-standalone/api/int-ui-standalone.api b/int-ui/int-ui-standalone/api/int-ui-standalone.api index bc32ffa9d..dbc0a93c9 100644 --- a/int-ui/int-ui-standalone/api/int-ui-standalone.api +++ b/int-ui/int-ui-standalone/api/int-ui-standalone.api @@ -39,14 +39,14 @@ public final class org/jetbrains/jewel/intui/standalone/StandalonePainterHintsPr } public final class org/jetbrains/jewel/intui/standalone/styling/IntUiButtonStylingKt { - public static final fun default-H1KY9o8 (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JF)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics; - public static synthetic fun default-H1KY9o8$default (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFILjava/lang/Object;)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics; + public static final fun default-Kzyhx1A (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFF)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics; + public static synthetic fun default-Kzyhx1A$default (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFFILjava/lang/Object;)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics; public static final fun getDefault (Lorg/jetbrains/jewel/ui/component/styling/ButtonColors$Companion;)Lorg/jetbrains/jewel/intui/standalone/styling/IntUiDefaultButtonColorFactory; public static final fun getDefault (Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle$Companion;)Lorg/jetbrains/jewel/intui/standalone/styling/IntUiDefaultButtonStyleFactory; public static final fun getOutlined (Lorg/jetbrains/jewel/ui/component/styling/ButtonColors$Companion;)Lorg/jetbrains/jewel/intui/standalone/styling/IntUiOutlinedButtonColorFactory; public static final fun getOutlined (Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle$Companion;)Lorg/jetbrains/jewel/intui/standalone/styling/IntUiOutlinedButtonStyleFactory; - public static final fun outlined-H1KY9o8 (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JF)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics; - public static synthetic fun outlined-H1KY9o8$default (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFILjava/lang/Object;)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics; + public static final fun outlined-Kzyhx1A (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFF)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics; + public static synthetic fun outlined-Kzyhx1A$default (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFFILjava/lang/Object;)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics; } public final class org/jetbrains/jewel/intui/standalone/styling/IntUiCheckboxStylingKt { diff --git a/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiButtonStyling.kt b/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiButtonStyling.kt index c18e2770b..4f19cb53e 100644 --- a/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiButtonStyling.kt +++ b/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiButtonStyling.kt @@ -208,11 +208,13 @@ public fun ButtonMetrics.Companion.default( padding: PaddingValues = PaddingValues(horizontal = 12.dp, vertical = 6.dp), minSize: DpSize = DpSize(72.dp, 28.dp), borderWidth: Dp = 0.dp, -): ButtonMetrics = ButtonMetrics(cornerSize, padding, minSize, borderWidth) + focusOutlineExpand: Dp = 2.dp, +): ButtonMetrics = ButtonMetrics(cornerSize, padding, minSize, borderWidth, focusOutlineExpand) public fun ButtonMetrics.Companion.outlined( cornerSize: CornerSize = CornerSize(4.dp), padding: PaddingValues = PaddingValues(horizontal = 12.dp, vertical = 6.dp), minSize: DpSize = DpSize(72.dp, 28.dp), borderWidth: Dp = 1.dp, -): ButtonMetrics = ButtonMetrics(cornerSize, padding, minSize, borderWidth) + focusOutlineExpand: Dp = Dp.Unspecified, +): ButtonMetrics = ButtonMetrics(cornerSize, padding, minSize, borderWidth, focusOutlineExpand) diff --git a/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiChipStyling.kt b/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiChipStyling.kt index 9bef42bfc..a2da9c8f6 100644 --- a/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiChipStyling.kt +++ b/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiChipStyling.kt @@ -31,13 +31,13 @@ public fun ChipColors.Companion.light( background: Brush = SolidColor(IntUiLightTheme.colors.grey(14)), backgroundDisabled: Brush = SolidColor(IntUiLightTheme.colors.grey(12)), backgroundFocused: Brush = background, - backgroundPressed: Brush = SolidColor(IntUiLightTheme.colors.grey(13)), + backgroundPressed: Brush = SolidColor(IntUiLightTheme.colors.grey(11)), backgroundHovered: Brush = background, - backgroundSelected: Brush = background, + backgroundSelected: Brush = SolidColor(IntUiLightTheme.colors.grey(13)), backgroundSelectedDisabled: Brush = backgroundDisabled, - backgroundSelectedFocused: Brush = background, - backgroundSelectedPressed: Brush = background, - backgroundSelectedHovered: Brush = background, + backgroundSelectedFocused: Brush = backgroundSelected, + backgroundSelectedPressed: Brush = backgroundPressed, + backgroundSelectedHovered: Brush = backgroundSelected, content: Color = IntUiLightTheme.colors.grey(1), contentDisabled: Color = IntUiLightTheme.colors.grey(8), contentFocused: Color = content, @@ -49,12 +49,12 @@ public fun ChipColors.Companion.light( contentSelectedPressed: Color = content, contentSelectedHovered: Color = content, border: Color = IntUiLightTheme.colors.grey(9), - borderDisabled: Color = IntUiLightTheme.colors.grey(6), + borderDisabled: Color = IntUiLightTheme.colors.grey(11), borderFocused: Color = IntUiLightTheme.colors.blue(4), borderPressed: Color = IntUiLightTheme.colors.grey(7), borderHovered: Color = IntUiLightTheme.colors.grey(8), borderSelected: Color = IntUiLightTheme.colors.blue(4), - borderSelectedDisabled: Color = borderSelected, + borderSelectedDisabled: Color = borderDisabled, borderSelectedFocused: Color = borderSelected, borderSelectedPressed: Color = borderSelected, borderSelectedHovered: Color = borderSelected, @@ -95,15 +95,15 @@ public fun ChipColors.Companion.light( @Composable public fun ChipColors.Companion.dark( background: Brush = SolidColor(IntUiDarkTheme.colors.grey(2)), - backgroundDisabled: Brush = SolidColor(IntUiDarkTheme.colors.grey(5)), + backgroundDisabled: Brush = SolidColor(IntUiDarkTheme.colors.grey(4)), backgroundFocused: Brush = background, - backgroundPressed: Brush = background, + backgroundPressed: Brush = SolidColor(IntUiDarkTheme.colors.grey(5)), backgroundHovered: Brush = background, - backgroundSelected: Brush = background, + backgroundSelected: Brush = SolidColor(IntUiDarkTheme.colors.grey(3)), backgroundSelectedDisabled: Brush = backgroundDisabled, - backgroundSelectedFocused: Brush = background, - backgroundSelectedPressed: Brush = background, - backgroundSelectedHovered: Brush = background, + backgroundSelectedFocused: Brush = backgroundSelected, + backgroundSelectedPressed: Brush = backgroundPressed, + backgroundSelectedHovered: Brush = backgroundSelected, content: Color = IntUiDarkTheme.colors.grey(12), contentDisabled: Color = IntUiDarkTheme.colors.grey(8), contentFocused: Color = content, @@ -120,7 +120,7 @@ public fun ChipColors.Companion.dark( borderPressed: Color = IntUiDarkTheme.colors.grey(7), borderHovered: Color = borderPressed, borderSelected: Color = IntUiDarkTheme.colors.blue(6), - borderSelectedDisabled: Color = borderSelected, + borderSelectedDisabled: Color = borderDisabled, borderSelectedFocused: Color = borderSelected, borderSelectedPressed: Color = borderSelected, borderSelectedHovered: Color = borderSelected, diff --git a/ui/api/ui.api b/ui/api/ui.api index 96cbb28ea..931d18d4b 100644 --- a/ui/api/ui.api +++ b/ui/api/ui.api @@ -91,8 +91,8 @@ public final class org/jetbrains/jewel/ui/Outline$Companion { } public final class org/jetbrains/jewel/ui/OutlineKt { - public static final fun focusOutline-FJfuzF0 (Landroidx/compose/ui/Modifier;Lorg/jetbrains/jewel/foundation/state/FocusableComponentState;Landroidx/compose/ui/graphics/Shape;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;FLandroidx/compose/runtime/Composer;II)Landroidx/compose/ui/Modifier; - public static final fun focusOutline-FJfuzF0 (Landroidx/compose/ui/Modifier;ZLandroidx/compose/ui/graphics/Shape;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;FLandroidx/compose/runtime/Composer;II)Landroidx/compose/ui/Modifier; + public static final fun focusOutline-AGcomas (Landroidx/compose/ui/Modifier;Lorg/jetbrains/jewel/foundation/state/FocusableComponentState;Landroidx/compose/ui/graphics/Shape;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;FFLandroidx/compose/runtime/Composer;II)Landroidx/compose/ui/Modifier; + public static final fun focusOutline-AGcomas (Landroidx/compose/ui/Modifier;ZLandroidx/compose/ui/graphics/Shape;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;FFLandroidx/compose/runtime/Composer;II)Landroidx/compose/ui/Modifier; public static final fun outline-HYR8e34 (Landroidx/compose/ui/Modifier;Lorg/jetbrains/jewel/foundation/state/FocusableComponentState;Lorg/jetbrains/jewel/ui/Outline;Landroidx/compose/ui/graphics/Shape;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;FLandroidx/compose/runtime/Composer;II)Landroidx/compose/ui/Modifier; } @@ -796,10 +796,11 @@ public final class org/jetbrains/jewel/ui/component/styling/ButtonColors$Compani public final class org/jetbrains/jewel/ui/component/styling/ButtonMetrics { public static final field $stable I public static final field Companion Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion; - public synthetic fun (Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFLkotlin/jvm/internal/DefaultConstructorMarker;)V + public synthetic fun (Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFFLkotlin/jvm/internal/DefaultConstructorMarker;)V public fun equals (Ljava/lang/Object;)Z public final fun getBorderWidth-D9Ej5fM ()F public final fun getCornerSize ()Landroidx/compose/foundation/shape/CornerSize; + public final fun getFocusOutlineExpand-D9Ej5fM ()F public final fun getMinSize-MYxV2XQ ()J public final fun getPadding ()Landroidx/compose/foundation/layout/PaddingValues; public fun hashCode ()I diff --git a/ui/src/main/kotlin/org/jetbrains/jewel/ui/Outline.kt b/ui/src/main/kotlin/org/jetbrains/jewel/ui/Outline.kt index eb20dacb2..8111cfdf7 100644 --- a/ui/src/main/kotlin/org/jetbrains/jewel/ui/Outline.kt +++ b/ui/src/main/kotlin/org/jetbrains/jewel/ui/Outline.kt @@ -35,7 +35,8 @@ public fun Modifier.focusOutline( outlineShape: Shape, alignment: Stroke.Alignment = Stroke.Alignment.Outside, outlineWidth: Dp = JewelTheme.globalMetrics.outlineWidth, -): Modifier = focusOutline(state.isFocused, outlineShape, alignment, outlineWidth) + expand: Dp = Dp.Unspecified, +): Modifier = focusOutline(state.isFocused, outlineShape, alignment, outlineWidth, expand) @Composable public fun Modifier.focusOutline( @@ -43,12 +44,13 @@ public fun Modifier.focusOutline( outlineShape: Shape, alignment: Stroke.Alignment = Stroke.Alignment.Outside, outlineWidth: Dp = JewelTheme.globalMetrics.outlineWidth, + expand: Dp = Dp.Unspecified, ): Modifier { val outlineColors = JewelTheme.globalColors.outlines return thenIf(showOutline) { val outlineColor = outlineColors.focused - border(alignment, outlineWidth, outlineColor, outlineShape) + border(alignment, outlineWidth, outlineColor, outlineShape, expand) } } diff --git a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Button.kt b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Button.kt index 30a6628ab..ca9d06748 100644 --- a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Button.kt +++ b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Button.kt @@ -58,8 +58,8 @@ public fun DefaultButton( enabled = enabled, interactionSource = interactionSource, style = style, - content = content, textStyle = textStyle, + content = content, ) } @@ -79,8 +79,8 @@ public fun OutlinedButton( enabled = enabled, interactionSource = interactionSource, style = style, - content = content, textStyle = textStyle, + content = content, ) } @@ -92,7 +92,7 @@ private fun ButtonImpl( interactionSource: MutableInteractionSource, style: ButtonStyle, textStyle: TextStyle, - content: @Composable RowScope.() -> Unit, + content: @Composable (RowScope.() -> Unit), ) { var buttonState by remember(interactionSource) { mutableStateOf(ButtonState.of(enabled = enabled)) @@ -131,7 +131,7 @@ private fun ButtonImpl( ) .background(colors.backgroundFor(buttonState).value, shape) .border(Stroke.Alignment.Center, style.metrics.borderWidth, borderColor, shape) - .focusOutline(buttonState, shape), + .focusOutline(buttonState, shape, expand = style.metrics.focusOutlineExpand), propagateMinConstraints = true, ) { val contentColor by colors.contentFor(buttonState) diff --git a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Chip.kt b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Chip.kt index f11959750..564929ffa 100644 --- a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Chip.kt +++ b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Chip.kt @@ -39,6 +39,7 @@ import org.jetbrains.jewel.foundation.theme.LocalContentColor import org.jetbrains.jewel.ui.component.styling.ChipStyle import org.jetbrains.jewel.ui.focusOutline import org.jetbrains.jewel.ui.theme.chipStyle +import org.jetbrains.jewel.ui.util.thenIf @Composable public fun Chip( @@ -166,7 +167,7 @@ private fun ChipImpl( modifier = modifier .background(colors.backgroundFor(chipState).value, shape) - .border(Stroke.Alignment.Center, borderWidth, borderColor, shape) + .thenIf(!chipState.isFocused) { border(Stroke.Alignment.Center, borderWidth, borderColor, shape) } .focusOutline(chipState, shape) .padding(style.metrics.padding), verticalAlignment = Alignment.CenterVertically, diff --git a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/styling/ButtonStyling.kt b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/styling/ButtonStyling.kt index 297263f45..7da745a52 100644 --- a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/styling/ButtonStyling.kt +++ b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/styling/ButtonStyling.kt @@ -93,6 +93,7 @@ public class ButtonMetrics( public val padding: PaddingValues, public val minSize: DpSize, public val borderWidth: Dp, + public val focusOutlineExpand: Dp, ) { public companion object }