Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-07 14:22:07 -04:00
Code Packages Releases Activity

feat: Implement Material Design 3 elevation and shadow effects

Browse Source 
- Added global toggle for enabling M3 elevation & shadow effects
- Refactored various components to sync updated specs
This commit is contained in:
purian23
2026-02-26 01:09:21 -05:00
parent a6269084c0
commit 788c1fa9e6
24 changed files with 181 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
quickshell/Modules/DankBar/BarCanvas.qml
View File

@@ -121,7 +121,7 @@ Item {
Loader {
id: shadowLoader
anchors.fill: parent
active: root.shadowEnabled && mainPathCorrectShape
active: root.shadowEnabled && mainPathCorrectShape && Theme.elevationEnabled
asynchronous: false
sourceComponent: Item {
anchors.fill: parent

18
quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
View File

@@ -940,9 +940,10 @@ BasePill {
}
})(), overflowMenu.dpr)
property real shadowBlurPx: 10
property real shadowSpreadPx: 0
property real shadowBaseAlpha: 0.60
readonly property var elev: Theme.elevationLevel2
property real shadowBlurPx: elev && elev.blurPx !== undefined ? elev.blurPx : 8
property real shadowSpreadPx: elev && elev.spreadPx !== undefined ? elev.spreadPx : 0
property real shadowBaseAlpha: elev && elev.alpha !== undefined ? elev.alpha : 0.25
readonly property real popupSurfaceAlpha: Theme.popupTransparency
readonly property real effectiveShadowAlpha: Math.max(0, Math.min(1, shadowBaseAlpha * popupSurfaceAlpha))
@@ -966,7 +967,7 @@ BasePill {
Item {
id: bgShadowLayer
anchors.fill: parent
layer.enabled: true
layer.enabled: Theme.elevationEnabled
layer.smooth: true
layer.textureSize: Qt.size(Math.round(width * overflowMenu.dpr * 2), Math.round(height * overflowMenu.dpr * 2))
layer.textureMirroring: ShaderEffectSource.MirrorVertically
@@ -1412,9 +1413,10 @@ BasePill {
}
})(), menuWindow.dpr)
property real shadowBlurPx: 10
property real shadowSpreadPx: 0
property real shadowBaseAlpha: 0.60
readonly property var elev: Theme.elevationLevel2
property real shadowBlurPx: elev && elev.blurPx !== undefined ? elev.blurPx : 8
property real shadowSpreadPx: elev && elev.spreadPx !== undefined ? elev.spreadPx : 0
property real shadowBaseAlpha: elev && elev.alpha !== undefined ? elev.alpha : 0.25
readonly property real popupSurfaceAlpha: Theme.popupTransparency
readonly property real effectiveShadowAlpha: Math.max(0, Math.min(1, shadowBaseAlpha * popupSurfaceAlpha))
@@ -1438,7 +1440,7 @@ BasePill {
Item {
id: menuBgShadowLayer
anchors.fill: parent
layer.enabled: true
layer.enabled: Theme.elevationEnabled
layer.smooth: true
layer.textureSize: Qt.size(Math.round(width * menuWindow.dpr), Math.round(height * menuWindow.dpr))
layer.textureMirroring: ShaderEffectSource.MirrorVertically

36
quickshell/Modules/DankDash/MediaDropdownOverlay.qml
View File

@@ -89,14 +89,14 @@ Item {
}
}
layer.enabled: true
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
shadowEnabled: true
shadowEnabled: Theme.elevationEnabled
shadowHorizontalOffset: 0
shadowVerticalOffset: 8
shadowBlur: 1.0
shadowColor: Qt.rgba(0, 0, 0, 0.4)
shadowOpacity: 0.7
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
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
}
MouseArea {
@@ -223,14 +223,14 @@ Item {
}
}
layer.enabled: true
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
shadowEnabled: true
shadowEnabled: Theme.elevationEnabled
shadowHorizontalOffset: 0
shadowVerticalOffset: 8
shadowBlur: 1.0
shadowColor: Qt.rgba(0, 0, 0, 0.4)
shadowOpacity: 0.7
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
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
}
Column {
@@ -373,14 +373,14 @@ Item {
}
}
layer.enabled: true
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
shadowEnabled: true
shadowEnabled: Theme.elevationEnabled
shadowHorizontalOffset: 0
shadowVerticalOffset: 8
shadowBlur: 1.0
shadowColor: Qt.rgba(0, 0, 0, 0.4)
shadowOpacity: 0.7
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
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
}
Column {

12
quickshell/Modules/DankDash/MediaPlayerTab.qml
View File

@@ -529,14 +529,14 @@ Item {
onClicked: activePlayer && activePlayer.togglePlaying()
}
layer.enabled: true
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
shadowEnabled: true
shadowEnabled: Theme.elevationEnabled
shadowHorizontalOffset: 0
shadowVerticalOffset: 0
shadowBlur: 1.0
shadowColor: Qt.rgba(0, 0, 0, 0.3)
shadowOpacity: 0.3
shadowVerticalOffset: Theme.elevationLevel1 && Theme.elevationLevel1.offsetY !== undefined ? Theme.elevationLevel1.offsetY : 1
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined ? Theme.elevationLevel1.blurPx : 4) / Theme.elevationBlurMax)) : 0
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
shadowOpacity: Theme.elevationLevel1 && Theme.elevationLevel1.alpha !== undefined ? Theme.elevationLevel1.alpha : 0.2
}
}
}

12
quickshell/Modules/DankDash/WeatherTab.qml
View File

@@ -241,14 +241,14 @@ Item {
color: Theme.primary
anchors.verticalCenter: parent.verticalCenter
layer.enabled: true
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
shadowEnabled: true
shadowEnabled: Theme.elevationEnabled
shadowHorizontalOffset: 0
shadowVerticalOffset: 4
shadowBlur: 0.8
shadowColor: Qt.rgba(0, 0, 0, 0.2)
shadowOpacity: 0.2
shadowVerticalOffset: Theme.elevationLevel1 && Theme.elevationLevel1.offsetY !== undefined ? Theme.elevationLevel1.offsetY : 1
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined ? Theme.elevationLevel1.blurPx : 4) / Theme.elevationBlurMax)) : 0
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
shadowOpacity: Theme.elevationLevel1 && Theme.elevationLevel1.alpha !== undefined ? Theme.elevationLevel1.alpha : 0.2
}
}

23
quickshell/Modules/Notifications/Popup/NotificationPopup.qml
View File

@@ -313,12 +313,10 @@ PanelWindow {
readonly property bool swipeActive: swipeDragHandler.active
property bool swipeDismissing: false
readonly property real radiusForShadow: Theme.cornerRadius
property real shadowBlurPx: SettingsData.notificationPopupShadowEnabled ? ((2 + radiusForShadow * 0.2) * (cardHoverHandler.hovered ? 1.2 : 1)) : 0
property real shadowSpreadPx: SettingsData.notificationPopupShadowEnabled ? (radiusForShadow * (cardHoverHandler.hovered ? 0.06 : 0)) : 0
property real shadowBaseAlpha: 0.35
readonly property real popupSurfaceAlpha: SettingsData.popupTransparency
readonly property real effectiveShadowAlpha: Math.max(0, Math.min(1, shadowBaseAlpha * popupSurfaceAlpha))
readonly property bool shadowsAllowed: Theme.elevationEnabled && SettingsData.notificationPopupShadowEnabled
readonly property var elevLevel: cardHoverHandler.hovered ? Theme.elevationLevel4 : Theme.elevationLevel3
property real shadowBlurPx: shadowsAllowed ? (elevLevel && elevLevel.blurPx !== undefined ? elevLevel.blurPx : 12) : 0
property real shadowOffsetY: shadowsAllowed ? (elevLevel && elevLevel.offsetY !== undefined ? elevLevel.offsetY : 6) : 0
Behavior on shadowBlurPx {
NumberAnimation {
@@ -327,7 +325,7 @@ PanelWindow {
}
}
Behavior on shadowSpreadPx {
Behavior on shadowOffsetY {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
@@ -348,15 +346,14 @@ PanelWindow {
layer.effect: MultiEffect {
id: shadowFx
autoPaddingEnabled: true
shadowEnabled: SettingsData.notificationPopupShadowEnabled
shadowEnabled: content.shadowsAllowed
blurEnabled: false
maskEnabled: false
shadowBlur: Math.max(0, Math.min(1, content.shadowBlurPx / bgShadowLayer.blurMax))
shadowScale: 1 + (2 * content.shadowSpreadPx) / Math.max(1, Math.min(bgShadowLayer.width, bgShadowLayer.height))
shadowColor: {
const baseColor = Theme.isLightMode ? Qt.rgba(0, 0, 0, 1) : Theme.surfaceContainerHighest;
return Theme.withAlpha(baseColor, content.effectiveShadowAlpha);
}
shadowScale: 1
shadowHorizontalOffset: 0
shadowVerticalOffset: content.shadowOffsetY
shadowColor: content.shadowsAllowed && content.elevLevel ? Theme.elevationShadowColor(content.elevLevel) : "transparent"
}
Rectangle {

11
quickshell/Modules/Settings/AboutTab.qml
View File

@@ -878,12 +878,13 @@ Item {
x: hoveredButton ? hoveredButton.mapToItem(aboutTab, hoveredButton.width / 2, 0).x - width / 2 : 0
y: hoveredButton ? communityIcons.mapToItem(aboutTab, 0, 0).y - height - 8 : 0
layer.enabled: true
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
shadowEnabled: true
shadowOpacity: 0.15
shadowVerticalOffset: 2
shadowBlur: 0.5
shadowEnabled: Theme.elevationEnabled
shadowOpacity: Theme.elevationLevel1 && Theme.elevationLevel1.alpha !== undefined ? Theme.elevationLevel1.alpha : 0.2
shadowVerticalOffset: Theme.elevationLevel1 && Theme.elevationLevel1.offsetY !== undefined ? Theme.elevationLevel1.offsetY : 1
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined ? Theme.elevationLevel1.blurPx : 4) / Theme.elevationBlurMax)) : 0
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
}
StyledText {

2
quickshell/Modules/Settings/NotificationsTab.qml
View File

@@ -274,7 +274,7 @@ Item {
settingKey: "notificationPopupShadowEnabled"
tags: ["notification", "popup", "shadow", "radius", "rounded"]
text: I18n.tr("Popup Shadow")
description: I18n.tr("Show drop shadow on notification popups")
description: I18n.tr("Show drop shadow on notification popups. Requires M3 Elevation to be enabled in Theme & Colors.")
checked: SettingsData.notificationPopupShadowEnabled
onToggled: checked => SettingsData.set("notificationPopupShadowEnabled", checked)
}

10
quickshell/Modules/Settings/ThemeColorsTab.qml
View File

@@ -1592,6 +1592,16 @@ Item {
defaultValue: 12
onSliderValueChanged: newValue => SettingsData.setCornerRadius(newValue)
}
SettingsToggleRow {
tab: "theme"
tags: ["elevation", "shadow", "lift", "m3", "material"]
settingKey: "m3ElevationEnabled"
text: I18n.tr("M3 Elevation & Shadows")
description: I18n.tr("Material Design 3 shadows and elevation on modals, popouts, and dialogs")
checked: SettingsData.m3ElevationEnabled ?? true
onToggled: checked => SettingsData.set("m3ElevationEnabled", checked)
}
}
SettingsCard {

12
quickshell/Modules/Settings/TimeWeatherTab.qml
View File

@@ -663,14 +663,14 @@ Item {
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
layer.enabled: true
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
shadowEnabled: true
shadowEnabled: Theme.elevationEnabled
shadowHorizontalOffset: 0
shadowVerticalOffset: 4
shadowBlur: 0.8
shadowColor: Qt.rgba(0, 0, 0, 0.2)
shadowOpacity: 0.2
shadowVerticalOffset: Theme.elevationLevel1 && Theme.elevationLevel1.offsetY !== undefined ? Theme.elevationLevel1.offsetY : 1
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined ? Theme.elevationLevel1.blurPx : 4) / Theme.elevationBlurMax)) : 0
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
shadowOpacity: Theme.elevationLevel1 && Theme.elevationLevel1.alpha !== undefined ? Theme.elevationLevel1.alpha : 0.2
}
}

10
quickshell/Modules/Toast.qml
View File

@@ -407,12 +407,12 @@ PanelWindow {
}
layer.effect: MultiEffect {
shadowEnabled: true
shadowEnabled: Theme.elevationEnabled
shadowHorizontalOffset: 0
shadowVerticalOffset: 4
shadowBlur: 0.8
shadowColor: Qt.rgba(0, 0, 0, 0.3)
shadowOpacity: 0.3
shadowVerticalOffset: Theme.elevationLevel3 && Theme.elevationLevel3.offsetY !== undefined ? Theme.elevationLevel3.offsetY : 6
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel3 && Theme.elevationLevel3.blurPx !== undefined ? Theme.elevationLevel3.blurPx : 12) / Theme.elevationBlurMax)) : 0
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel3)
shadowOpacity: Theme.elevationLevel3 && Theme.elevationLevel3.alpha !== undefined ? Theme.elevationLevel3.alpha : 0.3
}
Behavior on opacity {

12
quickshell/Modules/WorkspaceOverlays/OverviewWidget.qml
View File

@@ -148,14 +148,14 @@ Item {
radius: Theme.cornerRadius
color: Theme.surfaceContainer
layer.enabled: true
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
shadowEnabled: true
shadowBlur: 0.5
shadowEnabled: Theme.elevationEnabled
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
shadowHorizontalOffset: 0
shadowVerticalOffset: 4
shadowColor: Theme.shadowStrong
shadowOpacity: 1
shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
blurMax: 32
}