diff --git a/quickshell/Common/SettingsData.qml b/quickshell/Common/SettingsData.qml index 423dae6b..1169c9f2 100644 --- a/quickshell/Common/SettingsData.qml +++ b/quickshell/Common/SettingsData.qml @@ -179,6 +179,8 @@ Singleton { onModalElevationEnabledChanged: saveSettings() property bool popoutElevationEnabled: true onPopoutElevationEnabledChanged: saveSettings() + property bool barElevationEnabled: true + onBarElevationEnabledChanged: saveSettings() property string wallpaperFillMode: "Fill" property bool blurredWallpaperLayer: false property bool blurWallpaperOnOverview: false diff --git a/quickshell/Common/settings/SettingsSpec.js b/quickshell/Common/settings/SettingsSpec.js index 289c5167..962d6e6e 100644 --- a/quickshell/Common/settings/SettingsSpec.js +++ b/quickshell/Common/settings/SettingsSpec.js @@ -53,6 +53,7 @@ var SPEC = { m3ElevationCustomColor: { def: "#000000" }, modalElevationEnabled: { def: true }, popoutElevationEnabled: { def: true }, + barElevationEnabled: { def: true }, wallpaperFillMode: { def: "Fill" }, blurredWallpaperLayer: { def: false }, blurWallpaperOnOverview: { def: false }, diff --git a/quickshell/Modules/DankBar/BarCanvas.qml b/quickshell/Modules/DankBar/BarCanvas.qml index b71ca771..30b3fca2 100644 --- a/quickshell/Modules/DankBar/BarCanvas.qml +++ b/quickshell/Modules/DankBar/BarCanvas.qml @@ -53,15 +53,19 @@ Item { } } - readonly property real shadowIntensity: barConfig?.shadowIntensity ?? 0 - readonly property bool shadowEnabled: shadowIntensity > 0 - readonly property int blurMax: 64 - readonly property real shadowBlurPx: shadowIntensity * 0.2 - readonly property real shadowBlur: Math.max(0, Math.min(1, shadowBlurPx / blurMax)) - readonly property real shadowOpacity: (barConfig?.shadowOpacity ?? 60) / 100 - readonly property string shadowColorMode: barConfig?.shadowColorMode ?? "default" - readonly property color shadowBaseColor: { - switch (shadowColorMode) { + // M3 elevation shadow — Level 2 baseline (navigation bar), with per-bar override support + readonly property bool hasPerBarOverride: (barConfig?.shadowIntensity ?? 0) > 0 + readonly property var elevLevel: Theme.elevationLevel2 + readonly property bool shadowEnabled: (Theme.elevationEnabled + && (typeof SettingsData !== "undefined" ? (SettingsData.barElevationEnabled ?? true) : false)) + || hasPerBarOverride + + // Per-bar override values (when barConfig.shadowIntensity > 0) + readonly property real overrideBlurPx: (barConfig?.shadowIntensity ?? 0) * 0.2 + readonly property real overrideOpacity: (barConfig?.shadowOpacity ?? 60) / 100 + readonly property string overrideColorMode: barConfig?.shadowColorMode ?? "default" + readonly property color overrideBaseColor: { + switch (overrideColorMode) { case "surface": return Theme.surface; case "primary": @@ -74,7 +78,16 @@ Item { return "#000000"; } } - readonly property color shadowColor: Theme.withAlpha(shadowBaseColor, shadowOpacity * barWindow._backgroundAlpha) + + // Resolved values — per-bar override wins if set, otherwise use global M3 elevation + readonly property real shadowBlurPx: hasPerBarOverride ? overrideBlurPx : (elevLevel.blurPx ?? 8) + readonly property real shadowBlur: Math.max(0, Math.min(1, shadowBlurPx / Theme.elevationBlurMax)) + readonly property color shadowColor: hasPerBarOverride + ? Theme.withAlpha(overrideBaseColor, overrideOpacity) + : Theme.elevationShadowColor(elevLevel) + readonly property real shadowOffsetY: hasPerBarOverride + ? overrideBlurPx * 0.5 + : (elevLevel.offsetY ?? 4) readonly property string mainPath: generatePathForPosition(width, height) readonly property string borderFullPath: generateBorderFullPath(width, height) @@ -133,9 +146,10 @@ Item { layer.effect: MultiEffect { shadowEnabled: true shadowBlur: root.shadowBlur + blurMax: Theme.elevationBlurMax shadowColor: root.shadowColor - shadowVerticalOffset: root.isTop ? root.shadowBlurPx * 0.5 : (root.isBottom ? -root.shadowBlurPx * 0.5 : 0) - shadowHorizontalOffset: root.isLeft ? root.shadowBlurPx * 0.5 : (root.isRight ? -root.shadowBlurPx * 0.5 : 0) + shadowVerticalOffset: root.isTop ? root.shadowOffsetY : (root.isBottom ? -root.shadowOffsetY : 0) + shadowHorizontalOffset: root.isLeft ? root.shadowOffsetY : (root.isRight ? -root.shadowOffsetY : 0) autoPaddingEnabled: true } diff --git a/quickshell/Modules/DankDash/WeatherTab.qml b/quickshell/Modules/DankDash/WeatherTab.qml index ce5085d1..dce69570 100644 --- a/quickshell/Modules/DankDash/WeatherTab.qml +++ b/quickshell/Modules/DankDash/WeatherTab.qml @@ -813,12 +813,12 @@ Item { x: (pos?.h ?? 0) * skyBox.effectiveWidth - (moonPhase.width / 2) + skyBox.hMargin y: (pos?.v ?? 0) * -(skyBox.effectiveHeight / 2) + skyBox.effectiveHeight / 2 - (moonPhase.height / 2) + skyBox.vMargin - layer.enabled: true + layer.enabled: Theme.elevationEnabled layer.effect: MultiEffect { shadowEnabled: Theme.elevationEnabled shadowHorizontalOffset: 0 - shadowVerticalOffset: 4 - shadowBlur: 0.8 + shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4 + shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0 blurMax: Theme.elevationBlurMax shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2) } @@ -835,12 +835,12 @@ Item { x: (pos?.h ?? 0) * skyBox.effectiveWidth - (sun.width / 2) + skyBox.hMargin y: (pos?.v ?? 0) * -(skyBox.effectiveHeight / 2) + skyBox.effectiveHeight / 2 - (sun.height / 2) + skyBox.vMargin - layer.enabled: true + layer.enabled: Theme.elevationEnabled layer.effect: MultiEffect { shadowEnabled: Theme.elevationEnabled shadowHorizontalOffset: 0 - shadowVerticalOffset: 4 - shadowBlur: 0.8 + shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4 + shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0 blurMax: Theme.elevationBlurMax shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2) } diff --git a/quickshell/Modules/Settings/DankBarTab.qml b/quickshell/Modules/Settings/DankBarTab.qml index 7b61ab44..13989591 100644 --- a/quickshell/Modules/Settings/DankBarTab.qml +++ b/quickshell/Modules/Settings/DankBarTab.qml @@ -1045,7 +1045,7 @@ Item { SettingsCard { id: shadowCard iconName: "layers" - title: I18n.tr("Shadow", "bar shadow settings card") + title: I18n.tr("Shadow Override", "bar shadow settings card") settingKey: "barShadow" collapsible: true expanded: true @@ -1054,9 +1054,18 @@ Item { readonly property bool shadowActive: (selectedBarConfig?.shadowIntensity ?? 0) > 0 readonly property bool isCustomColor: (selectedBarConfig?.shadowColorMode ?? "default") === "custom" + StyledText { + width: parent.width + text: I18n.tr("Enable a custom override below to set per-bar shadow intensity, opacity, and color.") + font.pixelSize: Theme.fontSizeSmall + color: Theme.surfaceVariantText + wrapMode: Text.WordWrap + horizontalAlignment: Text.AlignLeft + } + SettingsToggleRow { - text: I18n.tr("Enable Shadow") - description: I18n.tr("Toggle M3 baseline shadow on or off for this bar") + text: I18n.tr("Custom Shadow Override") + description: I18n.tr("Override the global shadow with per-bar settings") checked: shadowCard.shadowActive onToggled: checked => { if (checked) { diff --git a/quickshell/Modules/Settings/ThemeColorsTab.qml b/quickshell/Modules/Settings/ThemeColorsTab.qml index 3705413c..5925d931 100644 --- a/quickshell/Modules/Settings/ThemeColorsTab.qml +++ b/quickshell/Modules/Settings/ThemeColorsTab.qml @@ -1607,7 +1607,7 @@ Item { tags: ["elevation", "shadow", "lift", "m3", "material"] settingKey: "m3ElevationEnabled" text: I18n.tr("Shadows") - description: I18n.tr("Material Design 3 shadows and elevation on modals, popouts, and dialogs") + description: I18n.tr("Material inspired shadows and elevation on modals, popouts, and dialogs") checked: SettingsData.m3ElevationEnabled ?? true onToggled: checked => SettingsData.set("m3ElevationEnabled", checked) } @@ -1736,6 +1736,17 @@ Item { visible: SettingsData.m3ElevationEnabled ?? true onToggled: checked => SettingsData.set("popoutElevationEnabled", checked) } + + SettingsToggleRow { + tab: "theme" + tags: ["elevation", "shadow", "bar", "panel", "navigation", "m3"] + settingKey: "barElevationEnabled" + text: I18n.tr("Bar Shadows") + description: I18n.tr("Shadow elevation on bars and panels") + checked: SettingsData.barElevationEnabled ?? true + visible: SettingsData.m3ElevationEnabled ?? true + onToggled: checked => SettingsData.set("barElevationEnabled", checked) + } } SettingsCard { diff --git a/quickshell/Modules/Toast.qml b/quickshell/Modules/Toast.qml index 450b3252..21d584d0 100644 --- a/quickshell/Modules/Toast.qml +++ b/quickshell/Modules/Toast.qml @@ -96,7 +96,7 @@ PanelWindow { } } radius: Theme.cornerRadius - layer.enabled: true + layer.enabled: Theme.elevationEnabled opacity: shouldBeVisible ? 1 : 0 Column { @@ -407,6 +407,7 @@ PanelWindow { } layer.effect: MultiEffect { + autoPaddingEnabled: true shadowEnabled: Theme.elevationEnabled shadowHorizontalOffset: 0 shadowVerticalOffset: Theme.elevationLevel3 && Theme.elevationLevel3.offsetY !== undefined ? Theme.elevationLevel3.offsetY : 6 diff --git a/quickshell/Widgets/DankDropdown.qml b/quickshell/Widgets/DankDropdown.qml index 643cb834..1a01cb82 100644 --- a/quickshell/Widgets/DankDropdown.qml +++ b/quickshell/Widgets/DankDropdown.qml @@ -261,8 +261,11 @@ Item { border.width: 2 radius: Theme.cornerRadius - layer.enabled: true + layer.enabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled layer.effect: MultiEffect { + autoPaddingEnabled: true + blurEnabled: false + maskEnabled: false shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0 blurMax: Theme.elevationBlurMax diff --git a/quickshell/Widgets/DankIconPicker.qml b/quickshell/Widgets/DankIconPicker.qml index f7656043..3bd5f653 100644 --- a/quickshell/Widgets/DankIconPicker.qml +++ b/quickshell/Widgets/DankIconPicker.qml @@ -137,6 +137,7 @@ Rectangle { layer.enabled: Theme.elevationEnabled layer.effect: MultiEffect { + autoPaddingEnabled: true shadowEnabled: Theme.elevationEnabled blurMax: Theme.elevationBlurMax shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2) diff --git a/quickshell/translations/settings_search_index.json b/quickshell/translations/settings_search_index.json index 3e1d2122..e76dd08b 100644 --- a/quickshell/translations/settings_search_index.json +++ b/quickshell/translations/settings_search_index.json @@ -2417,6 +2417,57 @@ ], "description": "Material Design 3 shadows and elevation on modals, popouts, and dialogs" }, + { + "section": "modalElevationEnabled", + "label": "Modal Shadows", + "tabIndex": 10, + "category": "Theme & Colors", + "keywords": [ + "dialog", + "elevation", + "m3", + "material", + "modal", + "shadow", + "shadows" + ], + "description": "Shadow elevation on modals and dialogs" + }, + { + "section": "popoutElevationEnabled", + "label": "Popout Shadows", + "tabIndex": 10, + "category": "Theme & Colors", + "keywords": [ + "dropdown", + "elevation", + "m3", + "material", + "osd", + "popout", + "popup", + "shadow", + "shadows" + ], + "description": "Shadow elevation on popouts, OSDs, and dropdowns" + }, + { + "section": "barElevationEnabled", + "label": "Bar Shadows", + "tabIndex": 10, + "category": "Theme & Colors", + "keywords": [ + "bar", + "elevation", + "m3", + "material", + "navigation", + "panel", + "shadow", + "shadows" + ], + "description": "Shadow elevation on bars and panels" + }, { "section": "cursorSize", "label": "Cursor Size",