Rename the Color singleton to avoid the Qt 6.12 clash

shell/Ui/Button.qml

@@ -32,9 +32,9 @@ BorderSurface {
   property bool bordered: false
 
   // Colors. Defaults track the theme; per-instance overrides are honored.
-  property color foreground: Color.foreground
+  property color foreground: Colors.foreground
   property color background: "transparent"
-  property color accent: Color.accent
+  property color accent: Colors.accent
 
   // Sizing.
   property string fontFamily: Style.font.family
@@ -54,9 +54,9 @@ BorderSurface {
   // Tooltip palette. Auto-rendered if tooltipText is set. Defaults pull
   // from [tooltip] in shell.toml; override per-instance only when a button
   // intentionally wants a tooltip that diverges from the theme.
-  property color tooltipBackground: Color.tooltip.background
-  property color tooltipForeground: Color.tooltip.text
-  property color tooltipBorder: Color.tooltip.border
+  property color tooltipBackground: Colors.tooltip.background
+  property color tooltipForeground: Colors.tooltip.text
+  property color tooltipBorder: Colors.tooltip.border
 
   signal clicked()
   signal rightClicked()
@@ -77,7 +77,7 @@ BorderSurface {
   readonly property bool hot: mouseArea.containsMouse || hasCursor
   readonly property bool _showFocusRing: focusable && activeFocus
   readonly property color _selectedColor: Style.selectedStateColor(root.foreground, root.accent)
-  readonly property var _tooltipBorderSpec: Border.localOrSurfaceSpec("tooltip", "border", root.tooltipBorder, Color.tooltip.border, Math.max(1, Style.normalBorderWidth))
+  readonly property var _tooltipBorderSpec: Border.localOrSurfaceSpec("tooltip", "border", root.tooltipBorder, Colors.tooltip.border, Math.max(1, Style.normalBorderWidth))
   readonly property var _focusBorderSpec: Border.controlSpec("focus", root.foreground, root.accent)
   readonly property var _hoverBorderSpec: Border.controlSpec("hover-cursor", root.foreground, root.accent)
   readonly property var _selectedBorderSpec: Border.controlSpec("selected", root.foreground, root.accent)

shell/Ui/ButtonGroup.qml

@@ -25,9 +25,9 @@ Row {
 
   property var options: []
   property string value: ""
-  property color foreground: Color.foreground
-  property color background: Color.background
-  property color accent: Color.accent
+  property color foreground: Colors.foreground
+  property color background: Colors.background
+  property color accent: Colors.accent
   property string fontFamily: Style.font.family
   property real fontSize: Style.font.body
   property bool focusable: true

shell/Ui/CalendarDays.qml

@@ -29,13 +29,13 @@ Item {
         width: root.calendar.weekColumnWidth
         height: root.headerHeight
         radius: Style.cornerRadius
-        color: weekHeaderMouse.containsMouse ? Style.hoverFillFor(root.foreground, Color.accent) : "transparent"
+        color: weekHeaderMouse.containsMouse ? Style.hoverFillFor(root.foreground, Colors.accent) : "transparent"
 
         Text {
           anchors.centerIn: parent
           text: "W"
           color: weekHeaderMouse.containsMouse
-            ? Style.hoverStateColor(root.foreground, Color.accent)
+            ? Style.hoverStateColor(root.foreground, Colors.accent)
             : Qt.darker(root.foreground, 1.9)
           font.family: root.calendar.fontFamily
           font.pixelSize: Style.font.caption
@@ -135,9 +135,9 @@ Item {
 
     required property var modelData
 
-    readonly property color todayFill: Style.selectedStateColor(root.foreground, Color.accent)
+    readonly property color todayFill: Style.selectedStateColor(root.foreground, Colors.accent)
     readonly property color dayColor: {
-      if (modelData.today) return Color.background
+      if (modelData.today) return Colors.background
       if (!modelData.inMonth) return root.foreground
       return modelData.weekend ? Qt.darker(root.foreground, 1.45) : root.foreground
     }
@@ -147,12 +147,12 @@ Item {
     radius: Style.cornerRadius
     color: {
       if (modelData.today) return todayFill
-      if (dayMouse.containsMouse) return Style.hoverFillFor(root.foreground, Color.accent)
-      if (modelData.selected) return Style.selectedFillFor(root.foreground, Color.accent)
+      if (dayMouse.containsMouse) return Style.hoverFillFor(root.foreground, Colors.accent)
+      if (modelData.selected) return Style.selectedFillFor(root.foreground, Colors.accent)
       return "transparent"
     }
     border.width: modelData.selected && !modelData.today ? Math.max(1, Style.spacing.hairline) : 0
-    border.color: Style.selectedBorderFor(root.foreground, Color.accent)
+    border.color: Style.selectedBorderFor(root.foreground, Colors.accent)
 
     Text {
       anchors.centerIn: parent

shell/Ui/CalendarMonthPicker.qml

@@ -34,18 +34,18 @@ Item {
         height: (root.height - root.gap * (root.rows - 1)) / root.rows
         radius: Style.cornerRadius
         color: {
-          if (isCurrentMonth) return Style.selectedStateColor(root.foreground, Color.accent)
-          if (isCursor) return Style.hoverFillFor(root.foreground, Color.accent)
+          if (isCurrentMonth) return Style.selectedStateColor(root.foreground, Colors.accent)
+          if (isCursor) return Style.hoverFillFor(root.foreground, Colors.accent)
           return "transparent"
         }
         border.width: isViewedMonth && !isCurrentMonth ? Math.max(1, Style.spacing.hairline) : 0
-        border.color: Style.selectedBorderFor(root.foreground, Color.accent)
+        border.color: Style.selectedBorderFor(root.foreground, Colors.accent)
 
         Text {
           anchors.centerIn: parent
           textFormat: Text.PlainText
           text: root.calendar.monthLabel(monthCell.index)
-          color: monthCell.isCurrentMonth ? Color.background : root.foreground
+          color: monthCell.isCurrentMonth ? Colors.background : root.foreground
           font.family: root.calendar.fontFamily
           font.pixelSize: Style.font.body
           font.letterSpacing: 1

shell/Ui/CalendarView.qml

@@ -7,7 +7,7 @@ Column {
 
   property date today: new Date()
   property int weekStart: CalendarModel.normalizedWeekStart(null, Qt.locale().firstDayOfWeek)
-  property color foreground: Color.foreground
+  property color foreground: Colors.foreground
   property string fontFamily: Style.font.family
   property bool showWeekNumbers: false
   property bool navigationAtBottom: false
@@ -191,7 +191,7 @@ Column {
         width: navigationLabel.width
         height: navigationLabel.implicitHeight + Style.space(6)
         radius: Style.cornerRadius
-        color: navigationMouse.containsMouse ? Style.hoverFillFor(root.foreground, Color.accent) : "transparent"
+        color: navigationMouse.containsMouse ? Style.hoverFillFor(root.foreground, Colors.accent) : "transparent"
       }
 
       Text {
@@ -204,7 +204,7 @@ Column {
           ? String(root.pickerYear)
           : Qt.formatDate(root.viewDate, "MMMM yyyy").toUpperCase()
         color: navigationMouse.containsMouse
-          ? Style.hoverStateColor(root.foreground, Color.accent)
+          ? Style.hoverStateColor(root.foreground, Colors.accent)
           : Qt.darker(root.foreground, 1.4)
         font.family: root.fontFamily
         font.pixelSize: Style.font.body

shell/Ui/Card.qml

@@ -4,8 +4,8 @@ import qs.Commons
 Rectangle {
   id: root
 
-  property color fillColor: Util.alpha(Color.background, Style.cardFillAlpha)
-  property color borderColor: Util.alpha(Color.blue, Style.cardBorderAlpha)
+  property color fillColor: Util.alpha(Colors.background, Style.cardFillAlpha)
+  property color borderColor: Util.alpha(Colors.blue, Style.cardBorderAlpha)
   default property alias content: contentColumn.data
   property alias spacing: contentColumn.spacing
   property int padding: Style.cardPadding

shell/Ui/CardHeader.qml

@@ -13,14 +13,14 @@ Row {
     width: Style.spaceReal(28)
     height: width
     radius: Style.cardRadius
-    color: Util.alpha(Color.blue, 0.2)
+    color: Util.alpha(Colors.blue, 0.2)
     anchors.verticalCenter: parent.verticalCenter
 
     Text {
       anchors.centerIn: parent
       text: root.icon
       textFormat: Text.PlainText
-      color: Color.blue
+      color: Colors.blue
       font.family: Style.font.family
       font.pixelSize: Style.font.body
     }
@@ -30,7 +30,7 @@ Row {
     anchors.verticalCenter: parent.verticalCenter
     text: root.title
     textFormat: Text.PlainText
-    color: Color.foreground
+    color: Colors.foreground
     font.family: Style.font.family
     font.pixelSize: Style.font.body
     font.bold: true

shell/Ui/CardIconButton.qml

@@ -12,14 +12,14 @@ Rectangle {
   implicitHeight: Style.spaceReal(24)
   radius: Style.cardRadius
   color: root.active
-    ? Color.accent
-    : (hover.hovered ? Util.alpha(Color.blue, 0.3) : Util.alpha(Color.foreground, 0.1))
+    ? Colors.accent
+    : (hover.hovered ? Util.alpha(Colors.blue, 0.3) : Util.alpha(Colors.foreground, 0.1))
 
   Text {
     anchors.centerIn: parent
     text: root.icon
     textFormat: Text.PlainText
-    color: root.active ? Color.background : (hover.hovered ? Color.blue : Color.magenta)
+    color: root.active ? Colors.background : (hover.hovered ? Colors.blue : Colors.magenta)
     font.family: Style.font.family
     font.pixelSize: Style.font.bodySmall
   }

shell/Ui/Chip.qml

@@ -13,17 +13,17 @@ Rectangle {
   radius: Style.cardRadius
   opacity: enabled ? 1 : 0.4
   color: root.active
-    ? Color.accent
-    : (hover.hovered ? Util.alpha(Color.blue, 0.25) : Util.alpha(Color.background, Style.cardFillAlpha))
+    ? Colors.accent
+    : (hover.hovered ? Util.alpha(Colors.blue, 0.25) : Util.alpha(Colors.background, Style.cardFillAlpha))
   border.width: 1
-  border.color: root.active ? Color.accent : Util.alpha(Color.blue, Style.cardBorderAlpha)
+  border.color: root.active ? Colors.accent : Util.alpha(Colors.blue, Style.cardBorderAlpha)
 
   Text {
     id: text
     anchors.centerIn: parent
     text: root.label
     textFormat: Text.PlainText
-    color: root.active ? Color.background : Color.foreground
+    color: root.active ? Colors.background : Colors.foreground
     font.family: Style.font.family
     font.pixelSize: Style.font.bodySmall
   }

shell/Ui/ConfirmDialog.qml

@@ -9,11 +9,11 @@ Item {
   property string cancelText: "Cancel"
   property string confirmText: "Confirm"
   property int selectedIndex: 1
-  property color background: Color.background
-  property color foreground: Color.foreground
-  property color scrim: Util.alpha(Color.background, 0.7)
-  property color selectedBackground: Util.alpha(Color.foreground, 0.08)
-  property color selectedText: Color.accent
+  property color background: Colors.background
+  property color foreground: Colors.foreground
+  property color scrim: Util.alpha(Colors.background, 0.7)
+  property color selectedBackground: Util.alpha(Colors.foreground, 0.08)
+  property color selectedText: Colors.accent
   property string fontFamily: Style.font.family
   property int cornerRadius: Style.cornerRadius
 
@@ -98,10 +98,10 @@ Item {
               width: Style.space(88)
               height: Style.space(34)
               color: selected
-                ? (destructive ? Util.alpha(Color.urgent, 0.22) : root.selectedBackground)
+                ? (destructive ? Util.alpha(Colors.urgent, 0.22) : root.selectedBackground)
                 : "transparent"
               borderSpec: Border.flat(destructive
-                ? (selected ? Color.urgent : Util.alpha(Color.urgent, 0.56))
+                ? (selected ? Colors.urgent : Util.alpha(Colors.urgent, 0.56))
                 : (selected ? root.selectedText : Util.alpha(root.foreground, 0.38)), Style.normalBorderWidth)
               radius: 0
 
@@ -109,7 +109,7 @@ Item {
                 textFormat: Text.PlainText
                 anchors.centerIn: parent
                 text: modelData
-                color: destructive ? (selected ? Color.urgent : root.foreground) : (selected ? root.selectedText : root.foreground)
+                color: destructive ? (selected ? Colors.urgent : root.foreground) : (selected ? root.selectedText : root.foreground)
                 font.family: root.fontFamily
                 font.pixelSize: Style.font.caption
               }

shell/Ui/CursorSurface.qml

@@ -19,8 +19,8 @@ BorderSurface {
   property bool outline: false
   property bool bordered: false
 
-  property color foreground: Color.foreground
-  property color accent: Color.accent
+  property color foreground: Colors.foreground
+  property color accent: Colors.accent
   property color fill: Style.hoverFillFor(foreground, accent)
   property color currentFill: Style.selectedFillFor(foreground, accent)
 

shell/Ui/Dropdown.qml

@@ -3,8 +3,8 @@ import QtQuick.Controls
 import qs.Commons
 
 // Themed single-select dropdown. Trigger row paints with the kit's focus
-// chrome; the popup anchors below and uses Color.popups.background +
-// Color.popups.border so it reads as a panel surface rather than the
+// chrome; the popup anchors below and uses Colors.popups.background +
+// Colors.popups.border so it reads as a panel surface rather than the
 // platform-native ComboBox look.
 //
 // `options` accepts either a plain string[] or an array of
@@ -22,11 +22,11 @@ Item {
   property string value: ""
   property var options: []
 
-  property color foreground: Color.popups.text
-  property color background: Color.popups.background
-  property color popupBorder: Color.popups.border
-  property color accent: Color.accent
-  readonly property var popupBorderSpec: Border.localOrSurfaceSpec("popups", "border", popupBorder, Color.popups.border, Style.normalBorderWidth)
+  property color foreground: Colors.popups.text
+  property color background: Colors.popups.background
+  property color popupBorder: Colors.popups.border
+  property color accent: Colors.accent
+  readonly property var popupBorderSpec: Border.localOrSurfaceSpec("popups", "border", popupBorder, Colors.popups.border, Style.normalBorderWidth)
   property string fontFamily: Style.font.family
   property int rowHeight: Style.spacing.controlHeight
   property int popupRowHeight: Style.spacing.popupRowHeight

shell/Ui/KeyboardPanel.qml

@@ -44,7 +44,7 @@ PanelWindow {
   property int padding: Style.spacing.popupPadding
   property int contentWidth: Style.space(280)
   property int contentHeight: Style.space(200)
-  property var borderSpec: Border.surfaceSpec("popups", "border", Color.popups.border, Math.max(1, Style.space(2)))
+  property var borderSpec: Border.surfaceSpec("popups", "border", Colors.popups.border, Math.max(1, Style.space(2)))
   property bool centerOnBar: false
   property bool open: false
   property int gap: Style.gapsOut  // distance between bar edge and panel
@@ -382,7 +382,7 @@ PanelWindow {
     y: root.cardOrigin.y
     width: root.contentWidth
     height: root.contentHeight
-    color: Color.popups.background
+    color: Colors.popups.background
     borderSpec: root.borderSpec
     padding: root.padding
     radius: Style.cornerRadius

shell/Ui/MetricBar.qml

@@ -22,7 +22,7 @@ Column {
       width: Style.spaceReal(22)
       text: root.icon
       textFormat: Text.PlainText
-      color: Color.magenta
+      color: Colors.magenta
       font.family: Style.font.family
       font.pixelSize: Style.font.body
     }
@@ -34,7 +34,7 @@ Column {
       anchors.verticalCenter: parent.verticalCenter
       text: root.name
       textFormat: Text.PlainText
-      color: Color.foreground
+      color: Colors.foreground
       font.family: Style.font.family
       font.pixelSize: Style.font.bodySmall
       font.bold: true
@@ -45,7 +45,7 @@ Column {
       anchors.verticalCenter: parent.verticalCenter
       text: root.detail
       textFormat: Text.PlainText
-      color: Util.alpha(Color.foreground, 0.8)
+      color: Util.alpha(Colors.foreground, 0.8)
       font.family: Style.font.family
       font.pixelSize: Style.font.bodySmall
     }
@@ -55,13 +55,13 @@ Column {
     width: parent.width
     height: Style.spaceReal(8)
     radius: Style.cardRadius
-    color: Util.alpha(Color.foreground, 0.2)
+    color: Util.alpha(Colors.foreground, 0.2)
 
     Rectangle {
       width: parent.width * Math.max(0, Math.min(100, root.percent)) / 100
       height: parent.height
       radius: Style.cardRadius
-      color: Color.accent
+      color: Colors.accent
 
       Behavior on width {
         NumberAnimation { duration: 200 }

shell/Ui/MultiSelect.qml

@@ -33,11 +33,11 @@ Item {
   property string triggerLabel: ""
   property bool showLabel: true
 
-  property color foreground: Color.popups.text
-  property color background: Color.popups.background
-  property color popupBorder: Color.popups.border
-  property color accent: Color.accent
-  readonly property var popupBorderSpec: Border.localOrSurfaceSpec("popups", "border", popupBorder, Color.popups.border, Style.normalBorderWidth)
+  property color foreground: Colors.popups.text
+  property color background: Colors.popups.background
+  property color popupBorder: Colors.popups.border
+  property color accent: Colors.accent
+  readonly property var popupBorderSpec: Border.localOrSurfaceSpec("popups", "border", popupBorder, Colors.popups.border, Style.normalBorderWidth)
   property string fontFamily: Style.font.family
   property int rowHeight: Style.spacing.controlHeight
   property int popupRowHeight: Style.spacing.popupRowHeight

shell/Ui/NumberField.qml

@@ -10,8 +10,8 @@ Column {
   property int from: 0
   property int to: 100
   property int stepSize: 1
-  property color foreground: Color.foreground
-  property color accent: Color.accent
+  property color foreground: Colors.foreground
+  property color accent: Colors.accent
   property string fontFamily: Style.font.family
   property real fontSize: Style.font.body
   property real fieldWidth: Style.spacing.numberFieldWidth

shell/Ui/OpticalGlyph.qml

@@ -7,7 +7,7 @@ Item {
   property string text: ""
   property string fontFamily: Style.font.family
   property real fontSize: Style.font.body
-  property color color: Color.foreground
+  property color color: Colors.foreground
   property bool debugBounds: false
 
   readonly property int renderedFontSize: Math.max(1, Math.round(fontSize))

shell/Ui/Panel.qml

@@ -19,7 +19,7 @@ Item {
   property bool popoutSwitchClosing: false
 
   readonly property bool opened: panelController.open
-  readonly property color barForeground: bar ? bar.barForeground : Color.foreground
+  readonly property color barForeground: bar ? bar.barForeground : Colors.foreground
 
   function open() { panelController.show() }
   function close() { panelController.hide() }

shell/Ui/PanelActionButton.qml

@@ -29,7 +29,7 @@ BorderSurface {
 
   property string iconText: ""
   property string tooltipText: ""
-  property color foreground: Color.foreground
+  property color foreground: Colors.foreground
   property color hoverColor: foreground
   property string fontFamily: Style.font.family
   property real fontSize: Style.font.icon
@@ -57,7 +57,7 @@ BorderSurface {
     ? Border.controlSpec("focus", hoverColor, hoverColor)
     : (_hot && bordered
       ? Border.controlSpec("hover-cursor", hoverColor, hoverColor)
-      : (bordered ? Border.controlSpec("normal", foreground, Color.accent) : Border.none()))
+      : (bordered ? Border.controlSpec("normal", foreground, Colors.accent) : Border.none()))
 
   color: _showFocusRing
     ? Style.focusFillFor(hoverColor, hoverColor)

shell/Ui/PanelHero.qml

@@ -8,7 +8,7 @@ Item {
   property string title: ""
   property string meta: ""
   property string detail: ""
-  property color foreground: Color.foreground
+  property color foreground: Colors.foreground
   property string fontFamily: Style.font.family
   property real iconSize: Style.font.display
   property real iconOpacity: 1.0
@@ -71,7 +71,7 @@ Item {
         implicitHeight: detailText.implicitHeight + Style.space(4)
         anchors.verticalCenter: parent.verticalCenter
         color: "transparent"
-        borderSpec: Border.controlSpec("normal", root.foreground, Color.accent)
+        borderSpec: Border.controlSpec("normal", root.foreground, Colors.accent)
         radius: Style.cornerRadius
 
         Text {

shell/Ui/PanelSectionHeader.qml

@@ -7,7 +7,7 @@ import qs.Commons
 Text {
   id: root
 
-  property color foreground: Color.foreground
+  property color foreground: Colors.foreground
   property string fontFamily: Style.font.family
   property real fontSize: Style.font.caption
 

shell/Ui/PanelSeparator.qml

@@ -7,7 +7,7 @@ import qs.Commons
 Rectangle {
   id: root
 
-  property color foreground: Color.foreground
+  property color foreground: Colors.foreground
   property real strength: 0.12
 
   width: parent ? parent.width : implicitWidth

shell/Ui/PanelSlider.qml

@@ -10,9 +10,9 @@ Item {
   property real maximum: 1
   property real step: 0.05
   property bool integer: false
-  property color trackColor: bar ? Style.selectedFillFor(bar.foreground, Color.accent) : "#333"
-  property color fillColor: bar ? bar.foreground : Color.foreground
-  property color knobColor: bar ? bar.foreground : Color.foreground
+  property color trackColor: bar ? Style.selectedFillFor(bar.foreground, Colors.accent) : "#333"
+  property color fillColor: bar ? bar.foreground : Colors.foreground
+  property color knobColor: bar ? bar.foreground : Colors.foreground
   property bool dragging: false
   property real trackHeight: Math.max(4, Math.round(Style.spacing.controlHeight * 0.11))
   property real knobSize: Math.max(14, Math.round(Style.spacing.controlHeight * 0.38))
@@ -23,7 +23,7 @@ Item {
   // crossing the track shows). Purely visual — snapping is the caller's job via
   // `integer`/`step` or an index-based value. Default 0 leaves the track plain.
   property int tickCount: 0
-  property color tickColor: bar ? bar.background : Color.background
+  property color tickColor: bar ? bar.background : Colors.background
 
   onValueChanged: if (!dragging) liveValue = value
 

shell/Ui/PanelToolTip.qml

@@ -9,7 +9,7 @@ import qs.Commons
 //     text: "Forget network"
 //   }
 //
-// Defaults pull from [tooltip] in shell.toml via Color.tooltip.*. Override
+// Defaults pull from [tooltip] in shell.toml via Colors.tooltip.*. Override
 // the panel* properties per-instance only when you need a tooltip that
 // intentionally diverges from the theme.
 //
@@ -18,13 +18,13 @@ import qs.Commons
 ToolTip {
   id: root
 
-  property color panelForeground: Color.tooltip.text
-  property color panelBackground: Color.tooltip.background
-  property color panelBorder: Color.tooltip.border
+  property color panelForeground: Colors.tooltip.text
+  property color panelBackground: Colors.tooltip.background
+  property color panelBorder: Colors.tooltip.border
   property string fontFamily: Style.font.family
   property real fontSize: Style.font.bodySmall
 
-  readonly property var panelBorderSpec: Border.localOrSurfaceSpec("tooltip", "border", panelBorder, Color.tooltip.border, Style.normalBorderWidth)
+  readonly property var panelBorderSpec: Border.localOrSurfaceSpec("tooltip", "border", panelBorder, Colors.tooltip.border, Style.normalBorderWidth)
 
   delay: 400
   padding: 0

shell/Ui/PopupCard.qml

@@ -13,8 +13,8 @@ PopupWindow {
   property int padding: Style.spacing.popupPadding
   property int contentWidth: Style.space(280)
   property int contentHeight: Style.space(200)
-  property color borderColor: Color.popups.border
-  property var borderSpec: Border.localOrSurfaceSpec("popups", "border", borderColor, Color.popups.border, Math.max(1, Style.space(2)))
+  property color borderColor: Colors.popups.border
+  property var borderSpec: Border.localOrSurfaceSpec("popups", "border", borderColor, Colors.popups.border, Math.max(1, Style.space(2)))
   property bool open: false
   property bool centerOnBar: false
   // "click" — uses HyprlandFocusGrab so clicking outside dismisses the popup.
@@ -150,7 +150,7 @@ PopupWindow {
   BorderSurface {
     id: card
     anchors.fill: parent
-    color: Color.popups.background
+    color: Colors.popups.background
     borderSpec: root.borderSpec
     padding: root.padding
     radius: Style.cornerRadius

shell/Ui/SearchableDropdown.qml

@@ -25,11 +25,11 @@ Item {
   property string emptyText: "No matches"
   property string triggerLabel: ""
 
-  property color foreground: Color.popups.text
-  property color background: Color.popups.background
-  property color popupBorder: Color.popups.border
-  property color accent: Color.accent
-  readonly property var popupBorderSpec: Border.localOrSurfaceSpec("popups", "border", popupBorder, Color.popups.border, Style.normalBorderWidth)
+  property color foreground: Colors.popups.text
+  property color background: Colors.popups.background
+  property color popupBorder: Colors.popups.border
+  property color accent: Colors.accent
+  readonly property var popupBorderSpec: Border.localOrSurfaceSpec("popups", "border", popupBorder, Colors.popups.border, Style.normalBorderWidth)
   property string fontFamily: Style.font.family
   property int rowHeight: Style.spacing.controlHeight
   property int popupRowHeight: Style.spacing.popupRowHeight

shell/Ui/SpeedTestOverlay.qml

@@ -288,7 +288,7 @@ PanelWindow {
       // round caps would leave a stray dot at the foot of the scale.
       ShapePath {
         strokeWidth: dial.arcWidth * 3
-        strokeColor: dial.arcVisible ? Qt.rgba(Color.accent.r, Color.accent.g, Color.accent.b, 0.18) : "transparent"
+        strokeColor: dial.arcVisible ? Qt.rgba(Colors.accent.r, Colors.accent.g, Colors.accent.b, 0.18) : "transparent"
         fillColor: "transparent"
         capStyle: ShapePath.RoundCap
 
@@ -305,7 +305,7 @@ PanelWindow {
       // Value: fills behind the needle.
       ShapePath {
         strokeWidth: dial.arcWidth
-        strokeColor: dial.arcVisible ? Color.accent : "transparent"
+        strokeColor: dial.arcVisible ? Colors.accent : "transparent"
         fillColor: "transparent"
         capStyle: ShapePath.RoundCap
 
@@ -356,8 +356,8 @@ PanelWindow {
         radius: width / 2
 
         gradient: Gradient {
-          GradientStop { position: 0.0; color: Color.accent }
-          GradientStop { position: 0.55; color: Color.accent }
+          GradientStop { position: 0.0; color: Colors.accent }
+          GradientStop { position: 0.55; color: Colors.accent }
           GradientStop { position: 1.0; color: "transparent" }
         }
       }

shell/Ui/StatRow.qml

@@ -17,7 +17,7 @@ Item {
     width: Style.spaceReal(22)
     text: root.icon
     textFormat: Text.PlainText
-    color: Color.magenta
+    color: Colors.magenta
     font.family: Style.font.family
     font.pixelSize: Style.font.body
   }
@@ -29,7 +29,7 @@ Item {
     anchors.verticalCenter: parent.verticalCenter
     text: root.label
     textFormat: Text.PlainText
-    color: Color.foreground
+    color: Colors.foreground
     font.family: Style.font.family
     font.pixelSize: Style.font.bodySmall
   }
@@ -43,7 +43,7 @@ Item {
     elide: Text.ElideRight
     text: root.value
     textFormat: Text.PlainText
-    color: Color.foreground
+    color: Colors.foreground
     font.family: Style.font.family
     font.pixelSize: Style.font.bodySmall
     font.bold: true

shell/Ui/TextField.qml

@@ -18,8 +18,8 @@ import qs.Commons
 TextField {
   id: root
 
-  property color foreground: Color.foreground
-  property color accent: Color.accent
+  property color foreground: Colors.foreground
+  property color accent: Colors.accent
   property color selectionTint: Style.selectionFillFor(foreground, accent)
   property bool password: false
   property real horizontalPadding: Style.spacing.controlPaddingX

shell/Ui/Toggle.qml

@@ -28,8 +28,8 @@ BorderSurface {
   // Override per-instance if a caller wants the opposite.
   property bool rounded: Style.cornerRadius > 0
 
-  property color foreground: Color.foreground
-  property color accent: Color.accent
+  property color foreground: Colors.foreground
+  property color accent: Colors.accent
   property string fontFamily: Style.font.family
   property real titleSize: Style.font.subtitle
   property real descriptionSize: Style.font.caption

shell/Ui/ToggleSwitch.qml

@@ -40,8 +40,8 @@ Item {
   property bool cursorRing: interactive
   property int cursorPad: Style.space(6)
   property bool rounded: Style.cornerRadius > 0
-  property color foreground: Color.foreground
-  property color accent: Color.accent
+  property color foreground: Colors.foreground
+  property color accent: Colors.accent
 
   signal toggled()
   signal hovered(bool isHovered)

shell/Ui/WidgetButton.qml

@@ -8,8 +8,8 @@ Item {
   property string text: ""
   property string fontFamily: bar ? bar.fontFamily : Style.font.family
   property real fontSize: Style.font.body
-  property color foreground: bar ? bar.barForeground : Color.foreground
-  property color activeColor: bar ? bar.urgent : Color.urgent
+  property color foreground: bar ? bar.barForeground : Colors.foreground
+  property color activeColor: bar ? bar.urgent : Colors.urgent
   property bool active: false
   property real horizontalMargin: 8.5
   property real verticalPadding: 6