mirror of
https://github.com/arthur-pbty/arthur-os.git
synced 2026-08-06 12:39:35 +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).
136 lines
3.8 KiB
QML
136 lines
3.8 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
import qs.Commons
|
|
|
|
// Themed ComboBox + popup. Anchors below the trigger, paints with the host
|
|
// shell's foreground/background palette, and inherits the shell-wide corner
|
|
// radius so nothing renders rounded when the user has set sharp corners.
|
|
Item {
|
|
id: root
|
|
|
|
property string label: ""
|
|
property string value: ""
|
|
property var options: []
|
|
property color foreground: Color.foreground
|
|
property color background: Color.background
|
|
property color accent: Color.accent
|
|
property string fontFamily: Style.font.family
|
|
property int cornerRadius: 0
|
|
property int rowHeight: 28
|
|
property int popupRowHeight: 28
|
|
property bool showLabel: true
|
|
|
|
signal changed(string value)
|
|
|
|
implicitWidth: 240
|
|
implicitHeight: showLabel ? rowHeight + 18 : rowHeight
|
|
|
|
Column {
|
|
anchors.fill: parent
|
|
spacing: 4
|
|
|
|
Text {
|
|
visible: root.showLabel && root.label !== ""
|
|
text: root.label
|
|
color: Qt.darker(root.foreground, 1.4)
|
|
font.family: root.fontFamily
|
|
font.pixelSize: Style.font.caption
|
|
font.bold: true
|
|
}
|
|
|
|
ComboBox {
|
|
id: combo
|
|
width: parent.width
|
|
height: root.rowHeight
|
|
font.family: root.fontFamily
|
|
font.pixelSize: Style.font.body
|
|
model: root.options
|
|
currentIndex: {
|
|
for (var i = 0; i < model.length; i++) if (model[i] === root.value) return i
|
|
return -1
|
|
}
|
|
onActivated: function(index) {
|
|
if (index >= 0 && index < model.length) root.changed(model[index])
|
|
}
|
|
|
|
background: Rectangle {
|
|
color: root.background
|
|
border.color: combo.activeFocus
|
|
? root.accent
|
|
: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.4)
|
|
border.width: 1
|
|
radius: root.cornerRadius
|
|
}
|
|
|
|
contentItem: Text {
|
|
leftPadding: 8
|
|
rightPadding: 24
|
|
text: combo.displayText
|
|
color: root.foreground
|
|
font: combo.font
|
|
verticalAlignment: Text.AlignVCenter
|
|
}
|
|
|
|
indicator: Text {
|
|
x: combo.width - width - 8
|
|
y: combo.topPadding + (combo.availableHeight - height) / 2
|
|
text: "▾"
|
|
color: Qt.darker(root.foreground, 1.2)
|
|
font.family: root.fontFamily
|
|
font.pixelSize: Style.font.caption
|
|
}
|
|
|
|
popup: Popup {
|
|
// Anchor the popup directly under the field, full width, sharp/round
|
|
// matching the shell radius. Override the native white-with-blue look.
|
|
y: combo.height
|
|
width: combo.width
|
|
implicitHeight: Math.min(contentItem.implicitHeight, root.popupRowHeight * 8)
|
|
padding: 1
|
|
|
|
background: Rectangle {
|
|
color: root.background
|
|
border.color: root.foreground
|
|
border.width: 1
|
|
radius: root.cornerRadius
|
|
}
|
|
|
|
contentItem: ListView {
|
|
clip: true
|
|
implicitHeight: contentHeight
|
|
model: combo.delegateModel
|
|
currentIndex: combo.highlightedIndex
|
|
boundsBehavior: Flickable.StopAtBounds
|
|
}
|
|
}
|
|
|
|
delegate: ItemDelegate {
|
|
required property var modelData
|
|
required property int index
|
|
|
|
width: combo.width
|
|
height: root.popupRowHeight
|
|
padding: 0
|
|
|
|
contentItem: Text {
|
|
text: String(modelData)
|
|
color: index === combo.highlightedIndex ? root.accent : root.foreground
|
|
font.family: root.fontFamily
|
|
font.pixelSize: Style.font.body
|
|
leftPadding: 10
|
|
rightPadding: 10
|
|
verticalAlignment: Text.AlignVCenter
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
background: Rectangle {
|
|
color: index === combo.highlightedIndex
|
|
? Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.12)
|
|
: "transparent"
|
|
radius: 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|