theme: restore inverse surface tooltips and index the surface role rows

port 2.0

quickshell/Common/Theme.qml

@@ -370,8 +370,8 @@ Singleton {
     readonly property color cardSurface: typeof SettingsData === "undefined" ? surfaceContainer : surfaceRoleColor(SettingsData.cardSurfaceColor, SettingsData.cardSurfaceCustomColor, surfaceContainer)
     readonly property color chipSurface: typeof SettingsData === "undefined" ? surfaceContainerHigh : surfaceRoleColor(SettingsData.chipSurfaceColor, SettingsData.chipSurfaceCustomColor, surfaceContainerHigh)
     readonly property color chipSurfaceNested: typeof SettingsData === "undefined" ? surfaceContainerHighest : surfaceRoleColor(SettingsData.chipSurfaceNestedColor, SettingsData.chipSurfaceNestedCustomColor, surfaceContainerHighest)
-    readonly property color tooltipSurface: typeof SettingsData === "undefined" ? surfaceContainerHighest : surfaceRoleColor(SettingsData.tooltipSurfaceColor, SettingsData.tooltipSurfaceCustomColor, surfaceContainerHighest)
-    readonly property color tooltipText: Contrast.readableOn(tooltipSurface, [surfaceText, (isLightColor(tooltipSurface) ? contrastDark : contrastLight)])
+    readonly property color tooltipSurface: typeof SettingsData === "undefined" ? inverseSurface : surfaceRoleColor(SettingsData.tooltipSurfaceColor, SettingsData.tooltipSurfaceCustomColor, inverseSurface)
+    readonly property color tooltipText: Contrast.readableOn(tooltipSurface, [inverseOnSurface, surfaceText, (isLightColor(tooltipSurface) ? contrastDark : contrastLight)])
     readonly property real containerSaturation: typeof SettingsData === "undefined" ? 1 : SettingsData.containerSaturation / 100
     readonly property real containerTint: (currentThemeData.containerTint ?? Tonal.defaultTint(surfaceContainer)) * containerSaturation
     property color primaryContainer: currentThemeData.softPrimaryContainer || Tonal.softContainer(primary, surfaceContainer, containerTint)

quickshell/Modules/Settings/WallpaperColorsTab.qml

@@ -806,71 +806,80 @@ Column {
 
     SettingsCard {
         tab: "wallpaper"
-        tags: ["surface", "color", "bar", "popout", "modal", "card", "chip", "background", "elevation"]
+        tags: ["surface", "color", "bar", "popout", "modal", "card", "chip", "tooltip", "background", "elevation"]
         title: I18n.tr("Surfaces")
-        settingKey: "surfaceColors"
+        settingKey: "surfaceRoles"
 
         SettingsRow {
-            settingKey: "surfaceColorsPreview"
+            settingKey: "surfaceRolesPreview"
             body: SettingsSurfacePreview {
                 width: parent.width
             }
         }
 
-        Repeater {
-            model: [
-                {
-                    "key": "hostSurfaceColor",
-                    "customKey": "hostSurfaceCustomColor",
-                    "fallback": "s",
-                    "text": I18n.tr("Host"),
-                    "tags": ["host", "bar", "popout", "modal", "window"]
-                },
-                {
-                    "key": "cardSurfaceColor",
-                    "customKey": "cardSurfaceCustomColor",
-                    "fallback": "sc",
-                    "text": I18n.tr("Cards"),
-                    "tags": ["card", "row", "section"]
-                },
-                {
-                    "key": "chipSurfaceColor",
-                    "customKey": "chipSurfaceCustomColor",
-                    "fallback": "sch",
-                    "text": I18n.tr("Chip", "surface role"),
-                    "tags": ["chip", "field", "dropdown", "input"]
-                },
-                {
-                    "key": "chipSurfaceNestedColor",
-                    "customKey": "chipSurfaceNestedCustomColor",
-                    "fallback": "schh",
-                    "text": I18n.tr("Nested chip", "surface role"),
-                    "tags": ["nested", "chip", "control"]
-                },
-                {
-                    "key": "tooltipSurfaceColor",
-                    "customKey": "tooltipSurfaceCustomColor",
-                    "fallback": "schh",
-                    "text": I18n.tr("Tooltip", "surface role"),
-                    "tags": ["tooltip", "hint", "hover", "toast"]
-                }
-            ]
+        SurfaceColorRow {
+            tab: "wallpaper"
+            tags: ["surface", "color", "host", "bar", "popout", "modal", "window"]
+            settingKey: "hostSurfaceColor"
+            resetKeys: ["hostSurfaceColor", "hostSurfaceCustomColor"]
+            text: I18n.tr("Host")
+            defaultColor: Theme.roleColor("s")
+            currentMode: SettingsData.hostSurfaceColor
+            customColor: SettingsData.hostSurfaceCustomColor
+            onModeSelected: mode => SettingsData.set("hostSurfaceColor", mode)
+            onCustomColorSelected: selectedColor => SettingsData.set("hostSurfaceCustomColor", selectedColor.toString())
+        }
 
-            SurfaceColorRow {
-                required property var modelData
+        SurfaceColorRow {
+            tab: "wallpaper"
+            tags: ["surface", "color", "card", "row", "section"]
+            settingKey: "cardSurfaceColor"
+            resetKeys: ["cardSurfaceColor", "cardSurfaceCustomColor"]
+            text: I18n.tr("Cards")
+            defaultColor: Theme.roleColor("sc")
+            currentMode: SettingsData.cardSurfaceColor
+            customColor: SettingsData.cardSurfaceCustomColor
+            onModeSelected: mode => SettingsData.set("cardSurfaceColor", mode)
+            onCustomColorSelected: selectedColor => SettingsData.set("cardSurfaceCustomColor", selectedColor.toString())
+        }
 
-                tab: "wallpaper"
-                tags: ["surface", "color"].concat(modelData.tags)
-                settingKey: modelData.key
-                resetKeys: [modelData.key, modelData.customKey]
-                text: modelData.text
-                defaultColor: Theme.roleColor(modelData.fallback)
-                currentMode: SettingsData[modelData.key]
-                customColor: SettingsData[modelData.customKey]
-                pickerTitle: modelData.text
-                onModeSelected: mode => SettingsData.set(modelData.key, mode)
-                onCustomColorSelected: selectedColor => SettingsData.set(modelData.customKey, selectedColor.toString())
-            }
+        SurfaceColorRow {
+            tab: "wallpaper"
+            tags: ["surface", "color", "chip", "field", "dropdown", "input"]
+            settingKey: "chipSurfaceColor"
+            resetKeys: ["chipSurfaceColor", "chipSurfaceCustomColor"]
+            text: I18n.tr("Chip", "surface role")
+            defaultColor: Theme.roleColor("sch")
+            currentMode: SettingsData.chipSurfaceColor
+            customColor: SettingsData.chipSurfaceCustomColor
+            onModeSelected: mode => SettingsData.set("chipSurfaceColor", mode)
+            onCustomColorSelected: selectedColor => SettingsData.set("chipSurfaceCustomColor", selectedColor.toString())
+        }
+
+        SurfaceColorRow {
+            tab: "wallpaper"
+            tags: ["surface", "color", "nested", "chip", "control"]
+            settingKey: "chipSurfaceNestedColor"
+            resetKeys: ["chipSurfaceNestedColor", "chipSurfaceNestedCustomColor"]
+            text: I18n.tr("Nested chip", "surface role")
+            defaultColor: Theme.roleColor("schh")
+            currentMode: SettingsData.chipSurfaceNestedColor
+            customColor: SettingsData.chipSurfaceNestedCustomColor
+            onModeSelected: mode => SettingsData.set("chipSurfaceNestedColor", mode)
+            onCustomColorSelected: selectedColor => SettingsData.set("chipSurfaceNestedCustomColor", selectedColor.toString())
+        }
+
+        SurfaceColorRow {
+            tab: "wallpaper"
+            tags: ["surface", "color", "tooltip", "hint", "hover", "toast"]
+            settingKey: "tooltipSurfaceColor"
+            resetKeys: ["tooltipSurfaceColor", "tooltipSurfaceCustomColor"]
+            text: I18n.tr("Tooltip", "surface role")
+            defaultColor: Theme.roleColor("inverseSurface")
+            currentMode: SettingsData.tooltipSurfaceColor
+            customColor: SettingsData.tooltipSurfaceCustomColor
+            onModeSelected: mode => SettingsData.set("tooltipSurfaceColor", mode)
+            onCustomColorSelected: selectedColor => SettingsData.set("tooltipSurfaceCustomColor", selectedColor.toString())
         }
     }
 

quickshell/translations/settings_search_index.json

@@ -512,6 +512,60 @@
     ],
     "page": "theme_surfaces"
   },
+  {
+    "section": "cardSurfaceColor",
+    "label": "Cards",
+    "tabIndex": -1,
+    "category": "Wallpaper & colors",
+    "keywords": [
+      "background",
+      "bg",
+      "card",
+      "cards",
+      "color",
+      "colors",
+      "colour",
+      "colours",
+      "desktop",
+      "hue",
+      "image",
+      "palette",
+      "picture",
+      "row",
+      "section",
+      "surface",
+      "tint",
+      "wallpaper"
+    ],
+    "page": "personalization"
+  },
+  {
+    "section": "chipSurfaceColor",
+    "label": "Chip",
+    "tabIndex": -1,
+    "category": "Wallpaper & colors",
+    "keywords": [
+      "background",
+      "bg",
+      "chip",
+      "color",
+      "colors",
+      "colour",
+      "colours",
+      "desktop",
+      "dropdown",
+      "field",
+      "hue",
+      "image",
+      "input",
+      "palette",
+      "picture",
+      "surface",
+      "tint",
+      "wallpaper"
+    ],
+    "page": "personalization"
+  },
   {
     "section": "focusRingColor",
     "label": "Color",
@@ -1301,6 +1355,34 @@
     "page": "dankbar_widgets",
     "icon": "view_in_ar"
   },
+  {
+    "section": "hostSurfaceColor",
+    "label": "Host",
+    "tabIndex": -1,
+    "category": "Wallpaper & colors",
+    "keywords": [
+      "background",
+      "bar",
+      "bg",
+      "color",
+      "colors",
+      "colour",
+      "colours",
+      "desktop",
+      "host",
+      "hue",
+      "image",
+      "modal",
+      "palette",
+      "picture",
+      "popout",
+      "surface",
+      "tint",
+      "wallpaper",
+      "window"
+    ],
+    "page": "personalization"
+  },
   {
     "section": "materialSeedHue",
     "label": "Hue",
@@ -1667,6 +1749,32 @@
     ],
     "page": "notifications"
   },
+  {
+    "section": "chipSurfaceNestedColor",
+    "label": "Nested chip",
+    "tabIndex": -1,
+    "category": "Wallpaper & colors",
+    "keywords": [
+      "background",
+      "bg",
+      "chip",
+      "color",
+      "colors",
+      "colour",
+      "colours",
+      "control",
+      "desktop",
+      "hue",
+      "image",
+      "nested",
+      "palette",
+      "picture",
+      "surface",
+      "tint",
+      "wallpaper"
+    ],
+    "page": "personalization"
+  },
   {
     "section": "_hub_network",
     "label": "Network",
@@ -2394,6 +2502,37 @@
     ],
     "page": "notifications"
   },
+  {
+    "section": "surfaceRoles",
+    "label": "Surfaces",
+    "tabIndex": -1,
+    "category": "Wallpaper & colors",
+    "keywords": [
+      "background",
+      "bar",
+      "bg",
+      "card",
+      "chip",
+      "color",
+      "colors",
+      "colour",
+      "colours",
+      "desktop",
+      "elevation",
+      "hue",
+      "image",
+      "modal",
+      "palette",
+      "picture",
+      "popout",
+      "surface",
+      "surfaces",
+      "tint",
+      "tooltip",
+      "wallpaper"
+    ],
+    "page": "personalization"
+  },
   {
     "section": "surfaceStyling",
     "label": "Surfaces",
@@ -2625,6 +2764,33 @@
     "page": "theme_surfaces",
     "description": "Off lets the compositor decorate DMS windows. Open windows update when reopened."
   },
+  {
+    "section": "tooltipSurfaceColor",
+    "label": "Tooltip",
+    "tabIndex": -1,
+    "category": "Wallpaper & colors",
+    "keywords": [
+      "background",
+      "bg",
+      "color",
+      "colors",
+      "colour",
+      "colours",
+      "desktop",
+      "hint",
+      "hover",
+      "hue",
+      "image",
+      "palette",
+      "picture",
+      "surface",
+      "tint",
+      "toast",
+      "tooltip",
+      "wallpaper"
+    ],
+    "page": "personalization"
+  },
   {
     "section": "wallpaperTransition",
     "label": "Transition",