Rearrange common tokens

This commit is contained in:
Ryan Hughes
2026-05-19 16:06:48 -04:00
parent 6f72604f2c
commit b45795127d
8 changed files with 51 additions and 39 deletions
+21 -15
View File
@@ -124,35 +124,37 @@ The shell exposes these tokens to QML via two singletons in
### Interactive states
`[style]` standardizes reusable control chrome around four states:
`normal`, `hover-cursor`, `selected`, and `focus`. State colors can be
palette roles (`foreground`, `accent`, `urgent`, `background`) or hex
strings. Fill/border alphas are applied to that state's color.
`[controls]` standardizes reusable control chrome (buttons, dropdowns,
tab strips, etc.) around four states: `normal`, `hover-cursor`, `focus`,
and `selected`. State colors accept palette roles (`foreground`,
`accent`, `urgent`, `background`) or hex strings; the default template
ships hex values. Fill/border alphas are applied to that state's color.
Focus inherits `hover-cursor` by default so mouse hover, the panel
keyboard cursor, and Qt activeFocus read as the same state. Use the
literal value `"hover-cursor"` on `focus-*` tokens to keep that
inheritance; set an explicit color/number only when a theme intentionally
wants focus to differ.
Surfaces like `[menu]`, `[app-launcher]`, and `[image-picker]` define
their own `selected-*` tokens and do **not** inherit from `[controls]`.
`[controls]` only governs the shared button/dropdown chrome.
| State | Color token | Fill alpha | Border width | Border alpha |
|-------|-------------|------------|--------------|--------------|
| Normal idle chrome | `normal-color` | `normal-fill-alpha` | `normal-border-width` | `normal-border-alpha` |
| Hover / keyboard cursor | `hover-cursor-color` | `hover-cursor-fill-alpha` | `hover-cursor-border-width` | `hover-cursor-border-alpha` |
| Persistent selected/current | `selected-color` | `selected-fill-alpha` | `selected-border-width` | `selected-border-alpha` |
| Qt activeFocus | `focus-color` | `focus-fill-alpha` | `focus-border-width` | `focus-border-alpha` |
| Persistent selected/current | `selected-color` | `selected-fill-alpha` | `selected-border-width` | `selected-border-alpha` |
The template ships `focus-*` adjacent to `hover-cursor-*` with the same
values so mouse hover, keyboard cursor, and tab focus read identically.
Themes that want focus to stand out override the four `focus-*` keys.
Border widths are the theme-level on/off switches for state borders; set
a width to `0` to keep the fill while removing that state border. The
default theme keeps selected borders off globally (`selected-border-width
= 0`); explicitly bordered controls can still keep their normal border
when selected.
default keeps selected borders off globally (`selected-border-width =
0`); explicitly bordered controls keep their normal border when selected.
```toml
[style]
[controls]
# Accent-tinted cursor/focus, foreground-tinted selected state.
hover-cursor-color = "accent"
focus-color = "hover-cursor"
focus-color = "accent"
selected-color = "foreground"
# Keep selected fills but remove selected-state borders.
@@ -164,6 +166,10 @@ Momentary fills use `pressed-fill-alpha` for button press feedback and
`pressed-color` or `selection-color`; they fall back to hover-cursor and
foreground respectively.
The section was previously named `[style]`. Hand-written theme
`shell.toml` files using the old name still apply — the parser accepts
both `[controls]` and `[style]`.
### Spacing
`[spacing] scale` multiplies the shell's shared margins, gaps, and