Skip to content

Commit

Permalink
Fix default button focus outline & chip colors
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@rock3r
rock3r committed Jul 1, 2024
1 parent 0ac4e02 commit a36ce3f
Show file tree
Hide file tree
Showing 10 changed files with 93 additions and 63 deletions.
13 changes: 3 additions & 10 deletions ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/BridgeGlobalMetrics.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,11 @@ import androidx.compose.ui.unit.dp
import com.intellij.ide.ui.laf.darcula.DarculaUIUtil
import com.intellij.ui.scale.JBUIScale
import com.intellij.util.ui.JBUI
import com.intellij.util.ui.UIUtil
import org.jetbrains.jewel.foundation.GlobalMetrics

public fun GlobalMetrics.Companion.readFromLaF(): GlobalMetrics {
// Copied from DarculaUIUtil.doPaint(java.awt.Graphics2D, int, int, float, float, boolean)
// except that scaling is all moved into the .dp operation below
val f = if (UIUtil.isRetina()) 0.5f else 1.0f
val lw = if (UIUtil.isUnderDefaultMacTheme()) f else DarculaUIUtil.LW.unscaled

return GlobalMetrics(
outlineWidth = (DarculaUIUtil.BW.unscaled + lw).dp,
public fun GlobalMetrics.Companion.readFromLaF(): GlobalMetrics =
GlobalMetrics(
outlineWidth = DarculaUIUtil.BW.unscaled.dp,
// The rowHeight() function returns a scaled value, but we need the base value
rowHeight = (JBUI.CurrentTheme.List.rowHeight() / JBUIScale.scale(1f)).dp,
)
}
7 changes: 6 additions & 1 deletion ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridge.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ import org.jetbrains.jewel.bridge.toDpSize
import org.jetbrains.jewel.bridge.toPaddingValues
import org.jetbrains.jewel.foundation.GlobalColors
import org.jetbrains.jewel.foundation.GlobalMetrics
import org.jetbrains.jewel.foundation.Stroke
import org.jetbrains.jewel.foundation.theme.ThemeColorPalette
import org.jetbrains.jewel.foundation.theme.ThemeDefinition
import org.jetbrains.jewel.foundation.theme.ThemeIconData
Expand Down Expand Up @@ -282,8 +283,10 @@ private fun readDefaultButtonStyle(): ButtonStyle {
cornerSize = retrieveArcAsCornerSizeWithFallbacks("Button.default.arc", "Button.arc"),
padding = PaddingValues(horizontal = 14.dp), // see DarculaButtonUI.HORIZONTAL_PADDING
minSize = DpSize(minimumSize.width, minimumSize.height),
borderWidth = DarculaUIUtil.LW.dp,
borderWidth = 1.dp,
focusOutlineExpand = 1.5.dp, // From DarculaButtonPainter.getBorderInsets
),
focusOutlineAlignment = Stroke.Alignment.Center,
)
}

Expand Down Expand Up @@ -330,7 +333,9 @@ 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,
),
focusOutlineAlignment = Stroke.Alignment.Center,
)
}

Expand Down
16 changes: 8 additions & 8 deletions int-ui/int-ui-standalone/api/int-ui-standalone.api
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -86,8 +86,8 @@ public final class org/jetbrains/jewel/intui/standalone/styling/IntUiDefaultButt
public final class org/jetbrains/jewel/intui/standalone/styling/IntUiDefaultButtonStyleFactory {
public static final field $stable I
public static final field INSTANCE Lorg/jetbrains/jewel/intui/standalone/styling/IntUiDefaultButtonStyleFactory;
public final fun dark (Lorg/jetbrains/jewel/ui/component/styling/ButtonColors;Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;Landroidx/compose/runtime/Composer;II)Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;
public final fun light (Lorg/jetbrains/jewel/ui/component/styling/ButtonColors;Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;Landroidx/compose/runtime/Composer;II)Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;
public final fun dark (Lorg/jetbrains/jewel/ui/component/styling/ButtonColors;Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;Landroidx/compose/runtime/Composer;II)Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;
public final fun light (Lorg/jetbrains/jewel/ui/component/styling/ButtonColors;Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;Landroidx/compose/runtime/Composer;II)Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;
}

public final class org/jetbrains/jewel/intui/standalone/styling/IntUiDefaultDropdownColorsFactory {
Expand Down Expand Up @@ -232,8 +232,8 @@ public final class org/jetbrains/jewel/intui/standalone/styling/IntUiOutlinedBut
public final class org/jetbrains/jewel/intui/standalone/styling/IntUiOutlinedButtonStyleFactory {
public static final field $stable I
public static final field INSTANCE Lorg/jetbrains/jewel/intui/standalone/styling/IntUiOutlinedButtonStyleFactory;
public final fun dark (Lorg/jetbrains/jewel/ui/component/styling/ButtonColors;Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;Landroidx/compose/runtime/Composer;II)Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;
public final fun light (Lorg/jetbrains/jewel/ui/component/styling/ButtonColors;Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;Landroidx/compose/runtime/Composer;II)Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;
public final fun dark (Lorg/jetbrains/jewel/ui/component/styling/ButtonColors;Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;Landroidx/compose/runtime/Composer;II)Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;
public final fun light (Lorg/jetbrains/jewel/ui/component/styling/ButtonColors;Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;Landroidx/compose/runtime/Composer;II)Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;
}

public final class org/jetbrains/jewel/intui/standalone/styling/IntUiRadioButtonStylingKt {
Expand Down
28 changes: 18 additions & 10 deletions ...dalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiButtonStyling.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ package org.jetbrains.jewel.intui.standalone.styling
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import org.jetbrains.jewel.foundation.Stroke
import org.jetbrains.jewel.intui.core.theme.IntUiDarkTheme
import org.jetbrains.jewel.intui.core.theme.IntUiLightTheme
import org.jetbrains.jewel.ui.component.styling.ButtonColors
Expand All @@ -23,13 +25,15 @@ public object IntUiDefaultButtonStyleFactory {
public fun light(
colors: ButtonColors = ButtonColors.Default.light(),
metrics: ButtonMetrics = ButtonMetrics.default(),
): ButtonStyle = ButtonStyle(colors, metrics)
focusOutlineAlignment: Stroke.Alignment = Stroke.Alignment.Center,
): ButtonStyle = ButtonStyle(colors, metrics, focusOutlineAlignment)

@Composable
public fun dark(
colors: ButtonColors = ButtonColors.Default.dark(),
metrics: ButtonMetrics = ButtonMetrics.default(),
): ButtonStyle = ButtonStyle(colors, metrics)
focusOutlineAlignment: Stroke.Alignment = Stroke.Alignment.Center,
): ButtonStyle = ButtonStyle(colors, metrics, focusOutlineAlignment)
}

public val ButtonStyle.Companion.Outlined: IntUiOutlinedButtonStyleFactory
Expand All @@ -40,13 +44,15 @@ public object IntUiOutlinedButtonStyleFactory {
public fun light(
colors: ButtonColors = ButtonColors.Outlined.light(),
metrics: ButtonMetrics = ButtonMetrics.outlined(),
): ButtonStyle = ButtonStyle(colors, metrics)
focusOutlineAlignment: Stroke.Alignment = Stroke.Alignment.Center,
): ButtonStyle = ButtonStyle(colors, metrics, focusOutlineAlignment)

@Composable
public fun dark(
colors: ButtonColors = ButtonColors.Outlined.dark(),
metrics: ButtonMetrics = ButtonMetrics.outlined(),
): ButtonStyle = ButtonStyle(colors, metrics)
focusOutlineAlignment: Stroke.Alignment = Stroke.Alignment.Center,
): ButtonStyle = ButtonStyle(colors, metrics, focusOutlineAlignment)
}

public val ButtonColors.Companion.Default: IntUiDefaultButtonColorFactory
Expand All @@ -67,8 +73,8 @@ public object IntUiDefaultButtonColorFactory {
contentHovered: Color = IntUiLightTheme.colors.grey(14),
border: Brush = SolidColor(IntUiLightTheme.colors.blue(4)),
borderDisabled: Brush = SolidColor(IntUiLightTheme.colors.grey(12)),
borderFocused: Brush = SolidColor(IntUiLightTheme.colors.blue(4)),
borderPressed: Brush = border,
borderFocused: Brush = SolidColor(IntUiLightTheme.colors.grey(14)),
borderPressed: Brush = borderFocused,
borderHovered: Brush = border,
): ButtonColors =
ButtonColors(
Expand Down Expand Up @@ -104,7 +110,7 @@ public object IntUiDefaultButtonColorFactory {
border: Brush = SolidColor(IntUiDarkTheme.colors.blue(6)),
borderDisabled: Brush = SolidColor(IntUiDarkTheme.colors.grey(5)),
borderFocused: Brush = SolidColor(IntUiDarkTheme.colors.grey(1)),
borderPressed: Brush = border,
borderPressed: Brush = borderFocused,
borderHovered: Brush = border,
): ButtonColors =
ButtonColors(
Expand Down Expand Up @@ -207,12 +213,14 @@ public fun ButtonMetrics.Companion.default(
cornerSize: CornerSize = CornerSize(4.dp),
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)
borderWidth: Dp = 1.dp,
focusOutlineExpand: Dp = 1.5.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)
28 changes: 14 additions & 14 deletions ...andalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiChipStyling.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
Loading

0 comments on commit a36ce3f

Please sign in to comment.