Restyle Quickshell settings inputs to match Omarchy aesthetic

Settings dialogs were rendering text/spin/combo controls with Qt's
default light style, which clashed with the dark Omarchy theme — black
text on dark fills, white dropdown popups, rounded corners, and a
pill-style toggle that didn't match the native StyleToggleRow switch.

- Style.qml: collapse all radius tokens to 0 so Noctalia-compat widgets
  inherit Omarchy's sharp-corner convention
- NToggle: rewrite to mirror the native 48x22 switch with accent fill
  and a sliding 16x16 thumb
- NComboBox: skin contentItem, indicator, popup, and delegate so the
  dropdown reads on dark themes
- NSpinBox: add a styled background, contentItem, and up/down indicators
- SettingsPanel calendar form + DynamicSettingsForm string field: drop
  default TextField chrome for the same translucent foreground fill used
  by WidgetCard, accent border on focus
This commit is contained in:
Jake Weaver
2026-05-15 16:46:56 -04:00
parent 37d6ae7f4b
commit ae70db3c53
6 changed files with 216 additions and 39 deletions
@@ -83,13 +83,30 @@ Column {
Component {
id: stringField
TextField {
id: stringControl
property string fieldKey: ""
property var field: ({})
width: parent.width
font.family: root.fontFamilyName
font.pixelSize: 12
color: root.foregroundColor
selectionColor: Qt.rgba(root.foregroundColor.r, root.foregroundColor.g, root.foregroundColor.b, 0.35)
selectedTextColor: root.foregroundColor
placeholderTextColor: Qt.darker(root.foregroundColor, 1.6)
leftPadding: 10
rightPadding: 10
topPadding: 7
bottomPadding: 7
text: root.currentValue(field) === undefined ? "" : String(root.currentValue(field))
onEditingFinished: if (fieldKey) root.fieldChanged(fieldKey, text)
background: Rectangle {
color: Qt.rgba(root.foregroundColor.r, root.foregroundColor.g, root.foregroundColor.b,
stringControl.activeFocus ? 0.08 : 0.04)
border.color: stringControl.activeFocus
? Qt.rgba(root.foregroundColor.r, root.foregroundColor.g, root.foregroundColor.b, 0.4)
: Qt.rgba(root.foregroundColor.r, root.foregroundColor.g, root.foregroundColor.b, 0.18)
border.width: 1
}
}
}