mirror of
https://github.com/arthur-pbty/arthur-os.git
synced 2026-08-07 12:40:55 +02:00
Ryan Hughes
648bc54db1
Themes now drive typography the same way they drive colors: one [font] base-size in shell.toml is the rem root, and every Style.font.<token> (caption, bodySmall, body, subtitle, title, heading, display, displayLarge, iconSmall, icon, iconLarge) derives from it via a fixed multiplier. Themes can also pin individual tokens for stylistic emphasis. base-size is clamped 11..13 until row-height tokens exist. Bar dimensions move to the same singleton: [bar] size-horizontal / size-vertical replace the hardcoded 26/28 in Bar.qml, exposed as Style.bar.sizeHorizontal / sizeVertical. Style.qml also resolves the fontconfig 'monospace' alias via fc-match and exposes Style.font.resolvedFamily so panels can display the concrete family. Watches ~/.config/fontconfig/fonts.conf so it tracks 'omarchy font set <name>'. The qs.Ui kit (PillButton, Dropdown, Toggle, TextField, etc.) and every first-party plugin (bar widgets, settings, menu, clipboard, emoji, polkit, notifications, osd, image-picker, dev-gallery) now bind to Style.font.* instead of pixel literals. Only three deliberate display-scale outliers remain: the notification empty-state glyph and the weather flyout's hero temperature pair, all commented. Background plugin's applyTheme IPC fast-path also pushes shell.toml to Style so theme swaps update typography and bar size without waiting for inotify debounce. Dev gallery (omarchy dev ui-preview) now ships a Typography section that renders the full scale and theme tokens live, and its summon command is fixed (omarchy-shell-ipc -> omarchy-shell).
98 lines
3.4 KiB
QML
98 lines
3.4 KiB
QML
import QtQuick
|
||
import qs.Commons
|
||
|
||
// Small (22×22 by default) icon button used at the right edge of panel rows
|
||
// for inline actions — forget network, confirm passphrase, unpair device,
|
||
// etc. Two visual modes are supported via `hoverColor`:
|
||
// - default: hoverColor === foreground → subtle foreground-tint hover
|
||
// - urgent: hoverColor === bar.urgent → red-tint hover for destructive
|
||
// actions like forget/unpair
|
||
//
|
||
// `enabled` gates clicks and dims the icon. The component owns its own
|
||
// hover state visuals; mouse hover does NOT update any panel cursor state
|
||
// here because action buttons are not cursor targets — the row they live
|
||
// in is.
|
||
//
|
||
// Set `focusable: true` to make the button keyboard-tabbable with an
|
||
// accent focus ring (Style.focusBorderColor / FillColor / Width). Use this
|
||
// in form contexts (the bar settings widget cards) where Tab walks a list
|
||
// of controls; leave it false for the right-edge actions on panel rows
|
||
// where the row's CursorSurface owns the keyboard cursor.
|
||
//
|
||
// Set `hasCursor: true` to have the button render the same fill as a
|
||
// mouse hover — so a panel's keyboard cursor lands on it identically.
|
||
// Use this when a PanelActionButton is itself the cursor target (rather
|
||
// than living inside a CursorSurface row). Emits `hovered(bool)` on
|
||
// pointer enter/leave so the panel can update its cursor state to match.
|
||
Rectangle {
|
||
id: root
|
||
|
||
property string iconText: ""
|
||
property string tooltipText: ""
|
||
property color foreground: Color.foreground
|
||
property color hoverColor: foreground
|
||
property color panelBackground: Color.background
|
||
property string fontFamily: Style.font.family
|
||
property real fontSize: Style.font.icon
|
||
property real size: 22
|
||
|
||
property bool focusable: false
|
||
property bool hasCursor: false
|
||
|
||
signal clicked()
|
||
signal hovered(bool isHovered)
|
||
|
||
activeFocusOnTab: focusable
|
||
Keys.onReturnPressed: if (focusable) root.clicked()
|
||
Keys.onEnterPressed: if (focusable) root.clicked()
|
||
Keys.onSpacePressed: if (focusable) root.clicked()
|
||
|
||
implicitWidth: size
|
||
implicitHeight: size
|
||
radius: Style.cornerRadius
|
||
|
||
readonly property bool _showFocusRing: focusable && activeFocus
|
||
readonly property bool _hot: (mouse.containsMouse || root.hasCursor) && root.enabled
|
||
|
||
color: _showFocusRing
|
||
? Style.focusFillColor
|
||
: (_hot
|
||
? Qt.rgba(hoverColor.r, hoverColor.g, hoverColor.b, 0.20)
|
||
: "transparent")
|
||
border.width: _showFocusRing ? Style.focusBorderWidth : 0
|
||
border.color: _showFocusRing ? Style.focusBorderColor : "transparent"
|
||
|
||
Behavior on color { ColorAnimation { duration: 60 } }
|
||
|
||
Text {
|
||
anchors.centerIn: parent
|
||
text: root.iconText
|
||
color: root.enabled
|
||
? (root._hot ? root.hoverColor : Qt.darker(root.foreground, 1.3))
|
||
: Qt.darker(root.foreground, 2.0)
|
||
font.family: root.fontFamily
|
||
font.pixelSize: root.fontSize
|
||
}
|
||
|
||
MouseArea {
|
||
id: mouse
|
||
anchors.fill: parent
|
||
hoverEnabled: true
|
||
cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||
enabled: root.enabled
|
||
onContainsMouseChanged: root.hovered(containsMouse)
|
||
onClicked: {
|
||
if (root.focusable) root.forceActiveFocus()
|
||
root.clicked()
|
||
}
|
||
}
|
||
|
||
PanelToolTip {
|
||
visible: root.tooltipText !== "" && mouse.containsMouse
|
||
text: root.tooltipText
|
||
panelForeground: root.foreground
|
||
panelBackground: root.panelBackground
|
||
fontFamily: root.fontFamily
|
||
}
|
||
}
|