Ryan Hughes
b5f7ba02c2
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.
72 lines
2.5 KiB
Smarty
72 lines
2.5 KiB
Smarty
# Omarchy shell surfaces. Colors derive from colors.toml; sizes and the
|
|
# typographic scale come from the keys below. Themes can ship
|
|
# themes/<name>/shell.toml to override any individual key.
|
|
|
|
[bar]
|
|
background = "{{ background }}"
|
|
text = "{{ foreground }}"
|
|
# Modules calling attention to themselves (recording, voxtype, alerts, updates)
|
|
active = "{{ color1 }}"
|
|
# Cross-axis size in px. size-horizontal is the height of top/bottom bars;
|
|
# size-vertical is the width of left/right bars.
|
|
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,
|
|
# heading ≈ base * 1.333). Clamped 11..13 by the shell — row heights are
|
|
# fixed until we ship matching spacing tokens, so growth would clip.
|
|
base-size = 12
|
|
# Per-token overrides, in px. Uncomment any to pin a specific size without
|
|
# affecting the rest of the scale. Useful for stylistic emphasis (a
|
|
# minimalist theme that wants a bigger heading without scaling everything).
|
|
# caption = 10
|
|
# body-small = 11
|
|
# body = 12
|
|
# subtitle = 13
|
|
# title = 14
|
|
# heading = 16
|
|
# display = 24
|
|
# display-large = 28
|
|
# icon-small = 11
|
|
# icon = 14
|
|
# icon-large = 18
|
|
|
|
[popups]
|
|
# Shared by every bar flyout. Body text inside flyouts is not separately
|
|
# themable — it follows [bar].text.
|
|
background = "{{ background }}"
|
|
border = "{{ foreground }}"
|
|
|
|
[notifications]
|
|
background = "{{ background }}"
|
|
text = "{{ foreground }}"
|
|
# Conventionally matches the Hyprland active-window border
|
|
border = "{{ accent }}"
|
|
countdown = "{{ accent }}"
|
|
|
|
[menu]
|
|
background = "{{ background }}"
|
|
text = "{{ foreground }}"
|
|
selected = "{{ accent }}"
|
|
|
|
[image-picker]
|
|
# Drawn at ~70% alpha as a scrim
|
|
background = "{{ background }}"
|
|
text = "{{ foreground }}"
|
|
selected-border = "{{ accent }}"
|
|
# Drawn at ~28% alpha
|
|
unselected-border = "{{ foreground }}"
|