refactor(theme): decouple foreground layers dep on blur on/off

2026-08-01 19:18:28 -04:00 · 2026-06-30 16:57:49 -04:00
parent 19406e99b9
commit aabcef0c9c
3 changed files with 42 additions and 47 deletions
@@ -575,16 +575,17 @@ Singleton {
    property color surfaceLight: withAlpha(surfaceVariant, transparentBlurLayers ? 0.3 : 0.1)
    property color surfaceVariantAlpha: withAlpha(surfaceVariant, 0.2)

-    readonly property bool blurForegroundLayers: BlurService.enabled && (typeof SettingsData === "undefined" || (SettingsData.blurForegroundLayers ?? true))
-    readonly property bool transparentBlurLayers: BlurService.enabled && !blurForegroundLayers
+    readonly property bool foregroundLayers: typeof SettingsData === "undefined" || (SettingsData.blurForegroundLayers ?? true)
+    readonly property bool blurForegroundLayers: BlurService.enabled && foregroundLayers
+    readonly property bool transparentBlurLayers: BlurService.enabled && !foregroundLayers
    readonly property color readableSurface: withAlpha(surfaceContainer, popupTransparency)
    readonly property color readableSurfaceHigh: withAlpha(surfaceContainerHigh, popupTransparency)
-    readonly property color floatingSurface: transparentBlurLayers ? withAlpha(readableSurface, 0) : readableSurface
-    readonly property color floatingSurfaceHigh: transparentBlurLayers ? withAlpha(readableSurfaceHigh, 0) : readableSurfaceHigh
+    readonly property color floatingSurface: foregroundLayers ? readableSurface : withAlpha(readableSurface, 0)
+    readonly property color floatingSurfaceHigh: foregroundLayers ? readableSurfaceHigh : withAlpha(readableSurfaceHigh, 0)
    readonly property color nestedSurface: floatingSurfaceHigh
    readonly property real blurLayerOutlineOpacity: Math.max(0, Math.min(1, typeof SettingsData === "undefined" ? 0.12 : (SettingsData.blurLayerOutlineOpacity ?? 0.12)))
-    readonly property real layerOutlineOpacity: BlurService.enabled ? blurLayerOutlineOpacity : 0.08
-    readonly property int layerOutlineWidth: BlurService.enabled && layerOutlineOpacity > 0 ? 1 : 0
+    readonly property real layerOutlineOpacity: blurLayerOutlineOpacity
+    readonly property int layerOutlineWidth: layerOutlineOpacity > 0 ? 1 : 0
    property color surfaceTextHover: withAlpha(surfaceText, 0.08)
    property color surfaceTextAlpha: withAlpha(surfaceText, 0.3)

@@ -635,9 +636,9 @@ Singleton {
    property color surfaceTextMedium: withAlpha(surfaceText, 0.7)

    property color outlineButton: withAlpha(outline, 0.5)
-    property color outlineLight: withAlpha(outline, BlurService.enabled ? Math.min(1, layerOutlineOpacity * 0.625) : 0.05)
+    property color outlineLight: withAlpha(outline, Math.min(1, layerOutlineOpacity * 0.625))
    property color outlineMedium: withAlpha(outline, layerOutlineOpacity)
-    property color outlineStrong: withAlpha(outline, BlurService.enabled ? Math.min(1, layerOutlineOpacity * 1.5) : 0.12)
+    property color outlineStrong: withAlpha(outline, Math.min(1, layerOutlineOpacity * 1.5))
    property color outlineHeavy: withAlpha(outline, 0.2)

    property color errorHover: withAlpha(error, 0.12)
@@ -658,7 +659,7 @@ Singleton {
        }
    }

-    readonly property color ccTileInactiveBg: transparentBlurLayers ? withAlpha(surfaceContainerHigh, 0.16) : (blurForegroundLayers ? withAlpha(surfaceContainerHigh, Math.min(popupTransparency, 0.24)) : withAlpha(surfaceContainer, popupTransparency))
+    readonly property color ccTileInactiveBg: transparentBlurLayers ? withAlpha(surfaceContainerHigh, 0.16) : (foregroundLayers ? withAlpha(surfaceContainerHigh, BlurService.enabled ? Math.min(popupTransparency, 0.24) : popupTransparency) : withAlpha(surfaceContainer, 0))
    readonly property color ccPillInactiveBg: transparentBlurLayers ? withAlpha(surfaceContainerHigh, 0.08) : nestedSurface
    readonly property color ccPillInactiveHoverBg: transparentBlurLayers ? withAlpha(primary, 0.10) : primaryPressed
    readonly property color ccSliderTrackColor: transparentBlurLayers ? surfaceText : surfaceContainerHigh
@@ -1681,12 +1681,14 @@ Item {
                        }
                    }
                }
-
-                SettingsControlledByFrame {
-                    visible: themeColorsTab.connectedFrameModeActive
-                    parentModal: themeColorsTab.parentModal
-                    settingLabel: I18n.tr("Surface Opacity")
-                    reason: I18n.tr("Managed by Frame in Connected Mode")
+                SettingsToggleRow {
+                    tab: "theme"
+                    tags: ["foreground", "layers", "contrast", "surface", "blur", "glass", "frosted"]
+                    settingKey: "blurForegroundLayers"
+                    text: I18n.tr("Foreground Layers")
+                    description: I18n.tr("Show foreground surfaces on panels for stronger contrast")
+                    checked: SettingsData.blurForegroundLayers ?? true
+                    onToggled: checked => SettingsData.set("blurForegroundLayers", checked)
                }

                SettingsSliderRow {
@@ -1704,6 +1706,20 @@ Item {
                    onSliderValueChanged: newValue => SettingsData.set("popupTransparency", newValue / 100)
                }

+                SettingsSliderRow {
+                    tab: "theme"
+                    tags: ["foreground", "layers", "outline", "border", "cards", "widgets", "notifications", "control center"]
+                    settingKey: "blurLayerOutlineOpacity"
+                    text: I18n.tr("Layer Outline Opacity")
+                    description: I18n.tr("Controls outlines around foreground cards, pills, and notification cards")
+                    value: Math.round((SettingsData.blurLayerOutlineOpacity ?? 0.12) * 100)
+                    minimum: 0
+                    maximum: 40
+                    unit: "%"
+                    defaultValue: 12
+                    onSliderValueChanged: newValue => SettingsData.set("blurLayerOutlineOpacity", newValue / 100)
+                }
+
                SettingsSliderRow {
                    tab: "theme"
                    tags: ["corner", "radius", "rounded", "square"]
@@ -1717,6 +1733,13 @@ Item {
                    defaultValue: 12
                    onSliderValueChanged: newValue => SettingsData.setCornerRadius(newValue)
                }
+
+                SettingsControlledByFrame {
+                    visible: themeColorsTab.connectedFrameModeActive
+                    parentModal: themeColorsTab.parentModal
+                    settingLabel: I18n.tr("Surface Opacity")
+                    reason: I18n.tr("Managed by Frame in Connected Mode")
+                }
            }

            SettingsCard {
@@ -1737,33 +1760,6 @@ Item {
                    onToggled: checked => SettingsData.set("blurEnabled", checked)
                }

-                SettingsToggleRow {
-                    tab: "theme"
-                    tags: ["blur", "foreground", "layers", "contrast", "glass", "frosted"]
-                    settingKey: "blurForegroundLayers"
-                    text: I18n.tr("Foreground Layers")
-                    description: I18n.tr("Show foreground surfaces on blurred panels for stronger contrast")
-                    checked: SettingsData.blurForegroundLayers ?? true
-                    visible: BlurService.available && (SettingsData.blurEnabled ?? false)
-                    enabled: BlurService.available
-                    onToggled: checked => SettingsData.set("blurForegroundLayers", checked)
-                }
-
-                SettingsSliderRow {
-                    tab: "theme"
-                    tags: ["blur", "foreground", "layers", "outline", "border", "cards", "widgets", "notifications", "control center"]
-                    settingKey: "blurLayerOutlineOpacity"
-                    text: I18n.tr("Layer Outline Opacity")
-                    description: I18n.tr("Controls outlines around blurred foreground cards, pills, and notification cards")
-                    visible: BlurService.available && (SettingsData.blurEnabled ?? false)
-                    value: Math.round((SettingsData.blurLayerOutlineOpacity ?? 0.12) * 100)
-                    minimum: 0
-                    maximum: 40
-                    unit: "%"
-                    defaultValue: 12
-                    onSliderValueChanged: newValue => SettingsData.set("blurLayerOutlineOpacity", newValue / 100)
-                }
-
                SettingsDropdownRow {
                    tab: "theme"
                    tags: ["blur", "border", "outline", "edge"]
@@ -3446,7 +3446,6 @@
    "keywords": [
      "appearance",
      "blur",
-      "blurred",
      "colors",
      "contrast",
      "foreground",
@@ -3459,10 +3458,11 @@
      "show",
      "stronger",
      "style",
+      "surface",
      "surfaces",
      "theme"
    ],
-    "description": "Show foreground surfaces on blurred panels for stronger contrast"
+    "description": "Show foreground surfaces on panels for stronger contrast"
  },
  {
    "section": "matugenTemplateGtk",
@@ -3618,8 +3618,6 @@
      "alert",
      "appearance",
      "around",
-      "blur",
-      "blurred",
      "border",
      "cards",
      "colors",
@@ -3641,7 +3639,7 @@
      "theme",
      "widgets"
    ],
-    "description": "Controls outlines around blurred foreground cards, pills, and notification cards"
+    "description": "Controls outlines around foreground cards, pills, and notification cards"
  },
  {
    "section": "m3ElevationLightDirection",