From 5b24ac037ff9599ee5446d692b78c78d09a65b25 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Mon, 11 Aug 2025 15:09:39 +0700 Subject: [PATCH] automatic transparency --- .../ii/modules/common/Appearance.qml | 37 +++++++++++++++---- .../quickshell/ii/modules/common/Config.qml | 7 +++- .../widgets/NotificationActionButton.qml | 6 +-- .../common/widgets/NotificationAppIcon.qml | 2 +- .../common/widgets/NotificationGroup.qml | 2 +- .../common/widgets/NotificationItem.qml | 6 +-- .../ii/modules/settings/StyleConfig.qml | 4 +- 7 files changed, 45 insertions(+), 19 deletions(-) diff --git a/.config/quickshell/ii/modules/common/Appearance.qml b/.config/quickshell/ii/modules/common/Appearance.qml index 2c00e48e5..64f76b96b 100644 --- a/.config/quickshell/ii/modules/common/Appearance.qml +++ b/.config/quickshell/ii/modules/common/Appearance.qml @@ -15,9 +15,26 @@ Singleton { property QtObject sizes property string syntaxHighlightingTheme - // Extremely conservative transparency values for consistency and readability - property real transparency: Config.options?.appearance.transparency ? (m3colors.darkmode ? 0.1 : 0.07) : 0 - property real contentTransparency: Config.options?.appearance.transparency ? (m3colors.darkmode ? 0.55 : 0.55) : 0 + // Transparency. The quadratic functions were derived from analysis of hand-picked transparency values. + ColorQuantizer { + id: wallColorQuant + source: Qt.resolvedUrl(Config.options.background.wallpaperPath) + depth: 0 // 2^0 = 1 color + rescaleSize: 10 + } + property real wallpaperVibrancy: (wallColorQuant.colors[0]?.hslSaturation + wallColorQuant.colors[0]?.hslLightness) / 2 + property real autoBackgroundTransparency: { // y = 0.5768x^2 - 0.759x + 0.2896 + let x = wallpaperVibrancy + let y = 0.5768 * (x * x) - 0.759 * (x) + 0.2896 + return Math.max(0, Math.min(0.22, y)) + } + property real autoContentTransparency: { // y = -10.1734x^2 + 3.4457x + 0.1872 + let x = autoBackgroundTransparency + let y = -10.1734 * (x * x) + 3.4457 * (x) + 0.1872 + return Math.max(0, Math.min(0.6, y)) + } + property real backgroundTransparency: Config?.options.appearance.transparency.enable ? Config?.options.appearance.transparency.automatic ? autoBackgroundTransparency : Config?.options.appearance.transparency.backgroundTransparency : 0 + property real contentTransparency: Config?.options.appearance.transparency.enable ? Config?.options.appearance.transparency.automatic ? autoContentTransparency : Config?.options.appearance.transparency.contentTransparency : 0 m3colors: QtObject { property bool darkmode: false @@ -100,26 +117,30 @@ Singleton { colors: QtObject { property color colSubtext: m3colors.m3outline - property color colLayer0: ColorUtils.mix(ColorUtils.transparentize(m3colors.m3background, root.transparency), m3colors.m3primary, Config.options.appearance.extraBackgroundTint ? 0.99 : 1) + property color colLayer0: ColorUtils.mix(ColorUtils.transparentize(m3colors.m3background, root.backgroundTransparency), m3colors.m3primary, Config.options.appearance.extraBackgroundTint ? 0.99 : 1) property color colOnLayer0: m3colors.m3onBackground property color colLayer0Hover: ColorUtils.transparentize(ColorUtils.mix(colLayer0, colOnLayer0, 0.9, root.contentTransparency)) property color colLayer0Active: ColorUtils.transparentize(ColorUtils.mix(colLayer0, colOnLayer0, 0.8, root.contentTransparency)) property color colLayer0Border: ColorUtils.mix(root.m3colors.m3outlineVariant, colLayer0, 0.4) - property color colLayer1: ColorUtils.transparentize(ColorUtils.mix(m3colors.m3surfaceContainerLow, m3colors.m3background, 0.8), root.contentTransparency); + property color colLayer1: ColorUtils.transparentize(m3colors.m3surfaceContainerLow, root.contentTransparency); property color colOnLayer1: m3colors.m3onSurfaceVariant; property color colOnLayer1Inactive: ColorUtils.mix(colOnLayer1, colLayer1, 0.45); - property color colLayer2: ColorUtils.transparentize(ColorUtils.mix(m3colors.m3surfaceContainer, m3colors.m3surfaceContainerHigh, 0.1), root.contentTransparency) + property color colLayer2: ColorUtils.transparentize(m3colors.m3surfaceContainer, root.contentTransparency) property color colOnLayer2: m3colors.m3onSurface; property color colOnLayer2Disabled: ColorUtils.mix(colOnLayer2, m3colors.m3background, 0.4); - property color colLayer3: ColorUtils.transparentize(ColorUtils.mix(m3colors.m3surfaceContainerHigh, m3colors.m3onSurface, 0.96), root.contentTransparency) - property color colOnLayer3: m3colors.m3onSurface; property color colLayer1Hover: ColorUtils.transparentize(ColorUtils.mix(colLayer1, colOnLayer1, 0.92), root.contentTransparency) property color colLayer1Active: ColorUtils.transparentize(ColorUtils.mix(colLayer1, colOnLayer1, 0.85), root.contentTransparency); property color colLayer2Hover: ColorUtils.transparentize(ColorUtils.mix(colLayer2, colOnLayer2, 0.90), root.contentTransparency) property color colLayer2Active: ColorUtils.transparentize(ColorUtils.mix(colLayer2, colOnLayer2, 0.80), root.contentTransparency); property color colLayer2Disabled: ColorUtils.transparentize(ColorUtils.mix(colLayer2, m3colors.m3background, 0.8), root.contentTransparency); + property color colLayer3: ColorUtils.transparentize(m3colors.m3surfaceContainerHigh, root.contentTransparency) + property color colOnLayer3: m3colors.m3onSurface; property color colLayer3Hover: ColorUtils.transparentize(ColorUtils.mix(colLayer3, colOnLayer3, 0.90), root.contentTransparency) property color colLayer3Active: ColorUtils.transparentize(ColorUtils.mix(colLayer3, colOnLayer3, 0.80), root.contentTransparency); + property color colLayer4: ColorUtils.transparentize(m3colors.m3surfaceContainerHighest, root.contentTransparency) + property color colOnLayer4: m3colors.m3onSurface; + property color colLayer4Hover: ColorUtils.transparentize(ColorUtils.mix(colLayer4, colOnLayer4, 0.90), root.contentTransparency) + property color colLayer4Active: ColorUtils.transparentize(ColorUtils.mix(colLayer4, colOnLayer4, 0.80), root.contentTransparency); property color colPrimary: m3colors.m3primary property color colOnPrimary: m3colors.m3onPrimary property color colPrimaryHover: ColorUtils.mix(colors.colPrimary, colLayer1Hover, 0.87) diff --git a/.config/quickshell/ii/modules/common/Config.qml b/.config/quickshell/ii/modules/common/Config.qml index 8337be313..ad2d614af 100644 --- a/.config/quickshell/ii/modules/common/Config.qml +++ b/.config/quickshell/ii/modules/common/Config.qml @@ -81,7 +81,12 @@ Singleton { property JsonObject appearance: JsonObject { property bool extraBackgroundTint: true property int fakeScreenRounding: 2 // 0: None | 1: Always | 2: When not fullscreen - property bool transparency: false + property JsonObject transparency: JsonObject { + property bool enable: true + property bool automatic: true + property real backgroundTransparency: 0.11 + property real contentTransparency: 0.57 + } property JsonObject wallpaperTheming: JsonObject { property bool enableAppsAndShell: true property bool enableQtApps: true diff --git a/.config/quickshell/ii/modules/common/widgets/NotificationActionButton.qml b/.config/quickshell/ii/modules/common/widgets/NotificationActionButton.qml index 2a737255e..4d0829620 100644 --- a/.config/quickshell/ii/modules/common/widgets/NotificationActionButton.qml +++ b/.config/quickshell/ii/modules/common/widgets/NotificationActionButton.qml @@ -12,9 +12,9 @@ RippleButton { leftPadding: 15 rightPadding: 15 buttonRadius: Appearance.rounding.small - colBackground: (urgency == NotificationUrgency.Critical) ? Appearance.colors.colSecondaryContainer : Appearance.colors.colSurfaceContainerHighest - colBackgroundHover: (urgency == NotificationUrgency.Critical) ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSurfaceContainerHighestHover - colRipple: (urgency == NotificationUrgency.Critical) ? Appearance.colors.colSecondaryContainerActive : Appearance.colors.colSurfaceContainerHighestActive + colBackground: (urgency == NotificationUrgency.Critical) ? Appearance.colors.colSecondaryContainer : Appearance.colors.colLayer4 + colBackgroundHover: (urgency == NotificationUrgency.Critical) ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colLayer4Hover + colRipple: (urgency == NotificationUrgency.Critical) ? Appearance.colors.colSecondaryContainerActive : Appearance.colors.colLayer4Active contentItem: StyledText { horizontalAlignment: Text.AlignHCenter diff --git a/.config/quickshell/ii/modules/common/widgets/NotificationAppIcon.qml b/.config/quickshell/ii/modules/common/widgets/NotificationAppIcon.qml index fb05a76ac..278691b8b 100644 --- a/.config/quickshell/ii/modules/common/widgets/NotificationAppIcon.qml +++ b/.config/quickshell/ii/modules/common/widgets/NotificationAppIcon.qml @@ -15,7 +15,7 @@ Rectangle { // App icon property real scale: 1 property real size: 38 * scale property real materialIconScale: 0.57 - property real appIconScale: 0.7 + property real appIconScale: 0.8 property real smallAppIconScale: 0.49 property real materialIconSize: size * materialIconScale property real appIconSize: size * appIconScale diff --git a/.config/quickshell/ii/modules/common/widgets/NotificationGroup.qml b/.config/quickshell/ii/modules/common/widgets/NotificationGroup.qml index d63bbb310..fbdc44daf 100644 --- a/.config/quickshell/ii/modules/common/widgets/NotificationGroup.qml +++ b/.config/quickshell/ii/modules/common/widgets/NotificationGroup.qml @@ -105,7 +105,7 @@ Item { // Notification group area id: background anchors.left: parent.left width: parent.width - color: Appearance.colors.colSurfaceContainer + color: Appearance.colors.colLayer2 radius: Appearance.rounding.normal anchors.leftMargin: root.xOffset diff --git a/.config/quickshell/ii/modules/common/widgets/NotificationItem.qml b/.config/quickshell/ii/modules/common/widgets/NotificationItem.qml index d5e9c4fa6..82367db17 100644 --- a/.config/quickshell/ii/modules/common/widgets/NotificationItem.qml +++ b/.config/quickshell/ii/modules/common/widgets/NotificationItem.qml @@ -140,8 +140,8 @@ Item { // Notification item area color: (expanded && !onlyNotification) ? (notificationObject.urgency == NotificationUrgency.Critical) ? ColorUtils.mix(Appearance.colors.colSecondaryContainer, Appearance.colors.colLayer2, 0.35) : - (Appearance.colors.colSurfaceContainerHigh) : - ColorUtils.transparentize(Appearance.colors.colSurfaceContainerHighest) + (Appearance.colors.colLayer3) : + ColorUtils.transparentize(Appearance.colors.colLayer3) implicitHeight: expanded ? (contentColumn.implicitHeight + padding * 2) : summaryRow.implicitHeight Behavior on implicitHeight { @@ -168,7 +168,7 @@ Item { // Notification item area id: summaryText visible: !root.onlyNotification font.pixelSize: root.fontSize - color: Appearance.colors.colOnLayer2 + color: Appearance.colors.colOnLayer3 elide: Text.ElideRight text: root.notificationObject.summary || "" } diff --git a/.config/quickshell/ii/modules/settings/StyleConfig.qml b/.config/quickshell/ii/modules/settings/StyleConfig.qml index 6eabfabdc..2c312460d 100644 --- a/.config/quickshell/ii/modules/settings/StyleConfig.qml +++ b/.config/quickshell/ii/modules/settings/StyleConfig.qml @@ -140,9 +140,9 @@ ContentPage { ConfigRow { ConfigSwitch { text: Translation.tr("Enable") - checked: Config.options.appearance.transparency + checked: Config.options.appearance.transparency.enable onCheckedChanged: { - Config.options.appearance.transparency = checked; + Config.options.appearance.transparency.enable = checked; } StyledToolTip { content: Translation.tr("Might look ass. Unsupported.")