[JEWEL-1069] Implement slim button

platform/jewel/ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridge.kt

@@ -89,6 +89,8 @@ internal fun createBridgeComponentStyling(theme: ThemeDefinition): ComponentStyl
         linkStyle = readLinkStyle(),
         menuStyle = menuStyle,
         outlinedButtonStyle = readOutlinedButtonStyle(),
+        defaultSlimButtonStyle = readDefaultSlimButtonStyle(),
+        outlinedSlimButtonStyle = readOutlinedSlimButtonStyle(),
         outlinedSplitButtonStyle = readOutlinedSplitButtonStyle(),
         popupContainerStyle = readPopupContainerStyle(),
         radioButtonStyle = readRadioButtonStyle(),

platform/jewel/ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridgeButton.kt

@@ -123,4 +123,28 @@ internal fun readOutlinedButtonStyle(): ButtonStyle {
     )
 }
 
+internal fun readDefaultSlimButtonStyle(): ButtonStyle {
+    val defaultButtonStyle = readDefaultButtonStyle()
+    return createSlimButtonStyle(colors = defaultButtonStyle.colors)
+}
+
+internal fun readOutlinedSlimButtonStyle(): ButtonStyle {
+    val outlinedButtonStyle = readOutlinedButtonStyle()
+    return createSlimButtonStyle(colors = outlinedButtonStyle.colors)
+}
+
 private fun buttonCornerSize(): CornerSize = CornerSize(DarculaUIUtil.BUTTON_ARC.dp.safeValue() / 2)
+
+private fun createSlimButtonStyle(colors: ButtonColors): ButtonStyle {
+    return ButtonStyle(
+        colors = colors,
+        metrics = ButtonMetrics(
+            cornerSize = buttonCornerSize(),
+            padding = PaddingValues(horizontal = 8.dp, vertical = 2.dp),
+            minSize = DpSize(60.dp, 24.dp),
+            borderWidth = borderWidth,
+            focusOutlineExpand = 1.5.dp,
+        ),
+        focusOutlineAlignment = Stroke.Alignment.Center,
+    )
+}

platform/jewel/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiButtonStyling.kt

@@ -214,3 +214,28 @@ public fun ButtonMetrics.Companion.outlined(
     borderWidth: Dp = 1.dp,
     focusOutlineExpand: Dp = Dp.Unspecified,
 ): ButtonMetrics = ButtonMetrics(cornerSize, padding, minSize, borderWidth, focusOutlineExpand)
+
+public fun ButtonMetrics.Companion.slim(
+    cornerSize: CornerSize = CornerSize(4.dp),
+    padding: PaddingValues = PaddingValues(horizontal = 8.dp, vertical = 2.dp),
+    minSize: DpSize = DpSize(60.dp, 24.dp),
+    borderWidth: Dp = 1.dp,
+    focusOutlineExpand: Dp = 1.5.dp,
+): ButtonMetrics = ButtonMetrics(cornerSize, padding, minSize, borderWidth, focusOutlineExpand)
+
+public val ButtonStyle.Companion.Slim: IntUiSlimButtonStyleFactory
+    get() = IntUiSlimButtonStyleFactory
+
+public object IntUiSlimButtonStyleFactory {
+    public fun light(
+        colors: ButtonColors = ButtonColors.Default.light(),
+        metrics: ButtonMetrics = ButtonMetrics.slim(),
+        focusOutlineAlignment: Stroke.Alignment = Stroke.Alignment.Center,
+    ): ButtonStyle = ButtonStyle(colors, metrics, focusOutlineAlignment)
+
+    public fun dark(
+        colors: ButtonColors = ButtonColors.Default.dark(),
+        metrics: ButtonMetrics = ButtonMetrics.slim(),
+        focusOutlineAlignment: Stroke.Alignment = Stroke.Alignment.Center,
+    ): ButtonStyle = ButtonStyle(colors, metrics, focusOutlineAlignment)
+}

platform/jewel/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/theme/IntUiTheme.kt

@@ -25,6 +25,7 @@ import org.jetbrains.jewel.intui.standalone.menuShortcut.StandaloneShortcutProvi
 import org.jetbrains.jewel.intui.standalone.styling.Default
 import org.jetbrains.jewel.intui.standalone.styling.Editor
 import org.jetbrains.jewel.intui.standalone.styling.Outlined
+import org.jetbrains.jewel.intui.standalone.styling.Slim
 import org.jetbrains.jewel.intui.standalone.styling.Undecorated
 import org.jetbrains.jewel.intui.standalone.styling.dark
 import org.jetbrains.jewel.intui.standalone.styling.darkTransparentBackground
@@ -35,6 +36,7 @@ import org.jetbrains.jewel.ui.DefaultComponentStyling
 import org.jetbrains.jewel.ui.LocalMenuItemShortcutHintProvider
 import org.jetbrains.jewel.ui.LocalMenuItemShortcutProvider
 import org.jetbrains.jewel.ui.LocalTypography
+import org.jetbrains.jewel.ui.component.styling.ButtonColors
 import org.jetbrains.jewel.ui.component.styling.ButtonStyle
 import org.jetbrains.jewel.ui.component.styling.CheckboxStyle
 import org.jetbrains.jewel.ui.component.styling.ChipStyle
@@ -263,6 +265,8 @@ public fun ComponentStyling.dark(
     linkStyle: LinkStyle = LinkStyle.dark(),
     menuStyle: MenuStyle = MenuStyle.dark(),
     outlinedButtonStyle: ButtonStyle = ButtonStyle.Outlined.dark(),
+    defaultSlimButtonStyle: ButtonStyle = ButtonStyle.Slim.dark(),
+    outlinedSlimButtonStyle: ButtonStyle = ButtonStyle.Slim.dark(colors = ButtonColors.Outlined.dark()),
     popupContainerStyle: PopupContainerStyle = PopupContainerStyle.dark(),
     outlinedSplitButtonStyle: SplitButtonStyle = SplitButtonStyle.Outlined.dark(),
     radioButtonStyle: RadioButtonStyle = RadioButtonStyle.dark(),
@@ -300,6 +304,8 @@ public fun ComponentStyling.dark(
         linkStyle = linkStyle,
         menuStyle = menuStyle,
         outlinedButtonStyle = outlinedButtonStyle,
+        defaultSlimButtonStyle = defaultSlimButtonStyle,
+        outlinedSlimButtonStyle = outlinedSlimButtonStyle,
         popupContainerStyle = popupContainerStyle,
         outlinedSplitButtonStyle = outlinedSplitButtonStyle,
         radioButtonStyle = radioButtonStyle,
@@ -340,6 +346,8 @@ public fun ComponentStyling.dark(
     linkStyle: LinkStyle = LinkStyle.dark(),
     menuStyle: MenuStyle = MenuStyle.dark(),
     outlinedButtonStyle: ButtonStyle = ButtonStyle.Outlined.dark(),
+    defaultSlimButtonStyle: ButtonStyle = ButtonStyle.Slim.dark(),
+    outlinedSlimButtonStyle: ButtonStyle = ButtonStyle.Slim.dark(colors = ButtonColors.Outlined.dark()),
     popupContainerStyle: PopupContainerStyle = PopupContainerStyle.dark(),
     outlinedSplitButtonStyle: SplitButtonStyle = SplitButtonStyle.Outlined.dark(),
     radioButtonStyle: RadioButtonStyle = RadioButtonStyle.dark(),
@@ -375,6 +383,8 @@ public fun ComponentStyling.dark(
         linkStyle = linkStyle,
         menuStyle = menuStyle,
         outlinedButtonStyle = outlinedButtonStyle,
+        defaultSlimButtonStyle = defaultSlimButtonStyle,
+        outlinedSlimButtonStyle = outlinedSlimButtonStyle,
         popupContainerStyle = popupContainerStyle,
         outlinedSplitButtonStyle = outlinedSplitButtonStyle,
         radioButtonStyle = radioButtonStyle,
@@ -414,6 +424,8 @@ public fun ComponentStyling.dark(
     linkStyle: LinkStyle = LinkStyle.dark(),
     menuStyle: MenuStyle = MenuStyle.dark(),
     outlinedButtonStyle: ButtonStyle = ButtonStyle.Outlined.dark(),
+    defaultSlimButtonStyle: ButtonStyle = ButtonStyle.Slim.dark(),
+    outlinedSlimButtonStyle: ButtonStyle = ButtonStyle.Slim.dark(colors = ButtonColors.Outlined.dark()),
     popupContainerStyle: PopupContainerStyle = PopupContainerStyle.dark(),
     outlinedSplitButtonStyle: SplitButtonStyle = SplitButtonStyle.Outlined.dark(),
     radioButtonStyle: RadioButtonStyle = RadioButtonStyle.dark(),
@@ -449,6 +461,8 @@ public fun ComponentStyling.dark(
         linkStyle = linkStyle,
         menuStyle = menuStyle,
         outlinedButtonStyle = outlinedButtonStyle,
+        defaultSlimButtonStyle = defaultSlimButtonStyle,
+        outlinedSlimButtonStyle = outlinedSlimButtonStyle,
         popupContainerStyle = popupContainerStyle,
         outlinedSplitButtonStyle = outlinedSplitButtonStyle,
         radioButtonStyle = radioButtonStyle,
@@ -489,6 +503,8 @@ public fun ComponentStyling.light(
     menuStyle: MenuStyle = MenuStyle.light(),
     popupContainerStyle: PopupContainerStyle = PopupContainerStyle.light(),
     outlinedButtonStyle: ButtonStyle = ButtonStyle.Outlined.light(),
+    defaultSlimButtonStyle: ButtonStyle = ButtonStyle.Slim.light(),
+    outlinedSlimButtonStyle: ButtonStyle = ButtonStyle.Slim.light(colors = ButtonColors.Outlined.light()),
     outlinedSplitButtonStyle: SplitButtonStyle = SplitButtonStyle.Outlined.light(),
     radioButtonStyle: RadioButtonStyle = RadioButtonStyle.light(),
     scrollbarStyle: ScrollbarStyle = ScrollbarStyle.light(),
@@ -525,6 +541,8 @@ public fun ComponentStyling.light(
         linkStyle = linkStyle,
         menuStyle = menuStyle,
         outlinedButtonStyle = outlinedButtonStyle,
+        defaultSlimButtonStyle = defaultSlimButtonStyle,
+        outlinedSlimButtonStyle = outlinedSlimButtonStyle,
         popupContainerStyle = popupContainerStyle,
         outlinedSplitButtonStyle = outlinedSplitButtonStyle,
         radioButtonStyle = radioButtonStyle,
@@ -566,6 +584,8 @@ public fun ComponentStyling.light(
     menuStyle: MenuStyle = MenuStyle.light(),
     popupContainerStyle: PopupContainerStyle = PopupContainerStyle.light(),
     outlinedButtonStyle: ButtonStyle = ButtonStyle.Outlined.light(),
+    defaultSlimButtonStyle: ButtonStyle = ButtonStyle.Slim.light(),
+    outlinedSlimButtonStyle: ButtonStyle = ButtonStyle.Slim.light(colors = ButtonColors.Outlined.light()),
     outlinedSplitButtonStyle: SplitButtonStyle = SplitButtonStyle.Outlined.light(),
     radioButtonStyle: RadioButtonStyle = RadioButtonStyle.light(),
     scrollbarStyle: ScrollbarStyle = ScrollbarStyle.light(),
@@ -600,6 +620,8 @@ public fun ComponentStyling.light(
         linkStyle = linkStyle,
         menuStyle = menuStyle,
         outlinedButtonStyle = outlinedButtonStyle,
+        defaultSlimButtonStyle = defaultSlimButtonStyle,
+        outlinedSlimButtonStyle = outlinedSlimButtonStyle,
         popupContainerStyle = popupContainerStyle,
         outlinedSplitButtonStyle = outlinedSplitButtonStyle,
         radioButtonStyle = radioButtonStyle,
@@ -640,6 +662,8 @@ public fun ComponentStyling.light(
     menuStyle: MenuStyle = MenuStyle.light(),
     popupContainerStyle: PopupContainerStyle = PopupContainerStyle.light(),
     outlinedButtonStyle: ButtonStyle = ButtonStyle.Outlined.light(),
+    defaultSlimButtonStyle: ButtonStyle = ButtonStyle.Slim.light(),
+    outlinedSlimButtonStyle: ButtonStyle = ButtonStyle.Slim.light(colors = ButtonColors.Outlined.light()),
     outlinedSplitButtonStyle: SplitButtonStyle = SplitButtonStyle.Outlined.light(),
     radioButtonStyle: RadioButtonStyle = RadioButtonStyle.light(),
     scrollbarStyle: ScrollbarStyle = ScrollbarStyle.light(),
@@ -674,6 +698,8 @@ public fun ComponentStyling.light(
         linkStyle = linkStyle,
         menuStyle = menuStyle,
         outlinedButtonStyle = outlinedButtonStyle,
+        defaultSlimButtonStyle = defaultSlimButtonStyle,
+        outlinedSlimButtonStyle = outlinedSlimButtonStyle,
         popupContainerStyle = popupContainerStyle,
         outlinedSplitButtonStyle = outlinedSplitButtonStyle,
         radioButtonStyle = radioButtonStyle,

platform/jewel/samples/showcase/src/main/kotlin/org/jetbrains/jewel/samples/showcase/components/Buttons.kt

@@ -28,6 +28,7 @@ import org.jetbrains.jewel.foundation.theme.JewelTheme
 import org.jetbrains.jewel.foundation.util.JewelLogger
 import org.jetbrains.jewel.ui.component.ActionButton
 import org.jetbrains.jewel.ui.component.DefaultButton
+import org.jetbrains.jewel.ui.component.DefaultSlimButton
 import org.jetbrains.jewel.ui.component.DefaultSplitButton
 import org.jetbrains.jewel.ui.component.GroupHeader
 import org.jetbrains.jewel.ui.component.Icon
@@ -36,6 +37,7 @@ import org.jetbrains.jewel.ui.component.IconButton
 import org.jetbrains.jewel.ui.component.InfoText
 import org.jetbrains.jewel.ui.component.MenuScope
 import org.jetbrains.jewel.ui.component.OutlinedButton
+import org.jetbrains.jewel.ui.component.OutlinedSlimButton
 import org.jetbrains.jewel.ui.component.OutlinedSplitButton
 import org.jetbrains.jewel.ui.component.SelectableIconActionButton
 import org.jetbrains.jewel.ui.component.SelectableIconButton
@@ -91,6 +93,23 @@ private fun NormalButtons() {
 
             DefaultButton(onClick = {}, enabled = false) { SingleLineText("Default disabled") }
         }
+
+        GroupHeader("Slim buttons")
+
+        FlowRow(
+            Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+            itemVerticalAlignment = Alignment.CenterVertically,
+        ) {
+            DefaultSlimButton(onClick = {}) { SingleLineText("Slim Default") }
+
+            DefaultSlimButton(onClick = {}, enabled = false) { SingleLineText("Slim Disabled") }
+
+            OutlinedSlimButton(onClick = {}) { SingleLineText("Outlined Slim") }
+
+            OutlinedSlimButton(onClick = {}, enabled = false) { SingleLineText("Outlined Slim Disabled") }
+        }
     }
 }
 

platform/jewel/ui/src/main/kotlin/org/jetbrains/jewel/ui/DefaultComponentStyling.kt

@@ -43,6 +43,8 @@ import org.jetbrains.jewel.ui.component.styling.LocalMenuStyle
 import org.jetbrains.jewel.ui.component.styling.LocalOutlinedButtonStyle
 import org.jetbrains.jewel.ui.component.styling.LocalOutlinedSplitButtonStyle
 import org.jetbrains.jewel.ui.component.styling.LocalPopupContainerStyle
+import org.jetbrains.jewel.ui.component.styling.LocalDefaultSlimButtonStyle
+import org.jetbrains.jewel.ui.component.styling.LocalOutlinedSlimButtonStyle
 import org.jetbrains.jewel.ui.component.styling.LocalRadioButtonStyle
 import org.jetbrains.jewel.ui.component.styling.LocalScrollbarStyle
 import org.jetbrains.jewel.ui.component.styling.LocalSearchMatchStyle
@@ -99,6 +101,8 @@ public class DefaultComponentStyling(
     public val linkStyle: LinkStyle,
     public val menuStyle: MenuStyle,
     public val outlinedButtonStyle: ButtonStyle,
+    public val defaultSlimButtonStyle: ButtonStyle,
+    public val outlinedSlimButtonStyle: ButtonStyle,
     public val popupContainerStyle: PopupContainerStyle,
     public val outlinedSplitButtonStyle: SplitButtonStyle,
     public val radioButtonStyle: RadioButtonStyle,
@@ -137,6 +141,8 @@ public class DefaultComponentStyling(
         linkStyle: LinkStyle,
         menuStyle: MenuStyle,
         outlinedButtonStyle: ButtonStyle,
+        defaultSlimButtonStyle: ButtonStyle,
+        outlinedSlimButtonStyle: ButtonStyle,
         popupContainerStyle: PopupContainerStyle,
         outlinedSplitButtonStyle: SplitButtonStyle,
         radioButtonStyle: RadioButtonStyle,
@@ -171,6 +177,8 @@ public class DefaultComponentStyling(
         linkStyle,
         menuStyle,
         outlinedButtonStyle,
+        defaultSlimButtonStyle,
+        outlinedSlimButtonStyle,
         popupContainerStyle,
         outlinedSplitButtonStyle,
         radioButtonStyle,
@@ -209,6 +217,8 @@ public class DefaultComponentStyling(
         linkStyle: LinkStyle,
         menuStyle: MenuStyle,
         outlinedButtonStyle: ButtonStyle,
+        defaultSlimButtonStyle: ButtonStyle,
+        outlinedSlimButtonStyle: ButtonStyle,
         popupContainerStyle: PopupContainerStyle,
         outlinedSplitButtonStyle: SplitButtonStyle,
         radioButtonStyle: RadioButtonStyle,
@@ -243,6 +253,8 @@ public class DefaultComponentStyling(
         linkStyle,
         menuStyle,
         outlinedButtonStyle,
+        defaultSlimButtonStyle,
+        outlinedSlimButtonStyle,
         popupContainerStyle,
         outlinedSplitButtonStyle,
         radioButtonStyle,
@@ -285,6 +297,8 @@ public class DefaultComponentStyling(
             LocalLinkStyle provides linkStyle,
             LocalMenuStyle provides menuStyle,
             LocalOutlinedButtonStyle provides outlinedButtonStyle,
+            LocalDefaultSlimButtonStyle provides defaultSlimButtonStyle,
+            LocalOutlinedSlimButtonStyle provides outlinedSlimButtonStyle,
             LocalPopupContainerStyle provides popupContainerStyle,
             LocalOutlinedSplitButtonStyle provides outlinedSplitButtonStyle,
             LocalRadioButtonStyle provides radioButtonStyle,
@@ -328,6 +342,8 @@ public class DefaultComponentStyling(
         if (linkStyle != other.linkStyle) return false
         if (menuStyle != other.menuStyle) return false
         if (outlinedButtonStyle != other.outlinedButtonStyle) return false
+        if (defaultSlimButtonStyle != other.defaultSlimButtonStyle) return false
+        if (outlinedSlimButtonStyle != other.outlinedSlimButtonStyle) return false
         if (popupContainerStyle != other.popupContainerStyle) return false
         if (outlinedSplitButtonStyle != other.outlinedSplitButtonStyle) return false
         if (radioButtonStyle != other.radioButtonStyle) return false
@@ -368,6 +384,8 @@ public class DefaultComponentStyling(
         result = 31 * result + linkStyle.hashCode()
         result = 31 * result + menuStyle.hashCode()
         result = 31 * result + outlinedButtonStyle.hashCode()
+        result = 31 * result + defaultSlimButtonStyle.hashCode()
+        result = 31 * result + outlinedSlimButtonStyle.hashCode()
         result = 31 * result + popupContainerStyle.hashCode()
         result = 31 * result + outlinedSplitButtonStyle.hashCode()
         result = 31 * result + radioButtonStyle.hashCode()
@@ -408,6 +426,8 @@ public class DefaultComponentStyling(
             "linkStyle=$linkStyle, " +
             "menuStyle=$menuStyle, " +
             "outlinedButtonStyle=$outlinedButtonStyle, " +
+            "defaultSlimButtonStyle=$defaultSlimButtonStyle, " +
+            "outlinedSlimButtonStyle=$outlinedSlimButtonStyle, " +
             "popupContainerStyle=$popupContainerStyle, " +
             "outlinedSplitButtonStyle=$outlinedSplitButtonStyle, " +
             "radioButtonStyle=$radioButtonStyle, " +