Unify PillButton, CursorPill, ChoiceButton into qs.Ui.Button + ButtonGroup
The three components were three takes on the same shape \u2014 a clickable rectangle with text/icon, a hot/hover state, an optional persistent border, and an optional 'selected' or 'active' highlight. CursorPill was a 30-line PillButton wrapper that added a hovered() signal; ChoiceButton was effectively PillButton with selected: bool painting an accent fill+border. Collapse them into a single qs.Ui.Button. State flags compose independently: hasCursor / hover hot fill active persistent foreground-tint fill selected accent fill + accent border bordered: true persistent 1px idle border (form primaries) focusable: true Tab focus paints the accent ring pressed pressed fill The hovered(bool) signal is now built-in, so CursorPill's wrapper is unnecessary. ButtonGroup wraps a Row+Repeater for the form-style 'pick one of N' pattern; panel-cursor-driven cases still compose Buttons directly in a Row with per-instance hasCursor wiring. Theme tokens move into a new [style] section in shell.toml: border-width = 1 focus-border-width = 3 idle-border-alpha = 0.4 hot-fill-alpha = 0.08 selected-fill-alpha = 0.18 pressed-fill-alpha = 0.22 focus-fill-alpha = 0.22 Style.qml parses these out of the same shell.toml [font] / [bar] already reads, and exposes pre-computed Style.hotFill / selectedFill / pressedFill / idleBorderColor / selectedAccentFill / borderWidth + the existing focusBorder* tokens. Themes that don't ship a [style] section get the previous defaults unchanged. Dev gallery consolidates three sections (PillButton, CursorPill, ChoiceButton) into Button + ButtonGroup, with the cursor model sections renamed accordingly.
This commit is contained in:
@@ -12,6 +12,17 @@ active = "{{ color1 }}"
|
||||
size-horizontal = 26
|
||||
size-vertical = 28
|
||||
|
||||
[style]
|
||||
# State alphas used by every interactive surface in the kit (Button,
|
||||
# Toggle, TextField, etc.). Foreground-tinted unless noted.
|
||||
border-width = 1 # idle 1px border on inputs and bordered buttons
|
||||
focus-border-width = 3 # accent ring on Tab focus
|
||||
idle-border-alpha = 0.4 # alpha for the idle 1px foreground border
|
||||
hot-fill-alpha = 0.08 # cursor / hover fill
|
||||
selected-fill-alpha = 0.18 # selected / active / current fill
|
||||
pressed-fill-alpha = 0.22 # button pressed
|
||||
focus-fill-alpha = 0.22 # accent fill behind Tab focus ring
|
||||
|
||||
[font]
|
||||
# base-size is the rem root for the type scale. Every Style.font.<token>
|
||||
# derives from it (e.g. body = base, subtitle ≈ base * 1.083,
|
||||
|
||||
Reference in New Issue
Block a user