From 92947e336028da7ff0726787db3df9f987a7bd64 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sat, 31 May 2025 01:39:06 +0200 Subject: [PATCH] easy transparency for yoinkers --- .config/quickshell/modules/bar/Workspaces.qml | 2 +- .../quickshell/modules/common/Appearance.qml | 42 +++++++++++-------- .../modules/common/ConfigOptions.qml | 10 ++++- .../modules/common/widgets/DialogButton.qml | 2 +- .../modules/common/widgets/GroupButton.qml | 2 +- .../modules/common/widgets/PrimaryTabBar.qml | 2 +- .../common/widgets/PrimaryTabButton.qml | 2 +- .../modules/common/widgets/RippleButton.qml | 2 +- .../common/widgets/SecondaryTabButton.qml | 4 +- .../common/widgets/StyledProgressBar.qml | 2 +- .../common/widgets/StyledRadioButton.qml | 4 +- .../modules/common/widgets/StyledSlider.qml | 2 +- .../modules/common/widgets/StyledSwitch.qml | 2 +- .../modules/mediaControls/PlayerControl.qml | 2 +- .../modules/overview/SearchItem.qml | 4 +- .../modules/overview/SearchWidget.qml | 2 +- .../modules/session/SessionActionButton.qml | 4 +- .../modules/sidebarRight/todo/TodoWidget.qml | 8 ++-- 18 files changed, 57 insertions(+), 41 deletions(-) diff --git a/.config/quickshell/modules/bar/Workspaces.qml b/.config/quickshell/modules/bar/Workspaces.qml index 39af1b212..8a75b3d46 100644 --- a/.config/quickshell/modules/bar/Workspaces.qml +++ b/.config/quickshell/modules/bar/Workspaces.qml @@ -141,7 +141,7 @@ Item { implicitWidth: workspaceButtonWidth - activeWorkspaceMargin * 2 implicitHeight: workspaceButtonWidth - activeWorkspaceMargin * 2 radius: Appearance.rounding.full - color: Appearance.m3colors.m3primary + color: Appearance.colors.colPrimary anchors.verticalCenter: parent.verticalCenter x: animatedActiveWorkspaceIndex * workspaceButtonWidth + activeWorkspaceMargin } diff --git a/.config/quickshell/modules/common/Appearance.qml b/.config/quickshell/modules/common/Appearance.qml index dcb3d2221..b9b45c288 100644 --- a/.config/quickshell/modules/common/Appearance.qml +++ b/.config/quickshell/modules/common/Appearance.qml @@ -15,6 +15,12 @@ Singleton { property QtObject sizes property string syntaxHighlightingTheme + // [!] Enabling transparency can affect readability when using light theme. + property real transparency: 0 + property real contentTransparency: 0 + // property real transparency: 0.15 + // property real contentTransparency: 0.5 + m3colors: QtObject { property bool darkmode: false property bool transparent: false @@ -96,29 +102,31 @@ Singleton { colors: QtObject { property color colSubtext: m3colors.m3outline - property color colLayer0: m3colors.m3background + property color colLayer0: ColorUtils.transparentize(m3colors.m3background, root.transparency) property color colOnLayer0: m3colors.m3onBackground - property color colLayer0Hover: ColorUtils.mix(colLayer0, colOnLayer0, 0.9) - property color colLayer0Active: ColorUtils.mix(colLayer0, colOnLayer0, 0.8) - property color colLayer1: ColorUtils.mix(m3colors.m3surfaceContainerLow, m3colors.m3background, 0.7); + 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 colLayer1: ColorUtils.transparentize(ColorUtils.mix(m3colors.m3surfaceContainerLow, m3colors.m3background, 0.7), root.contentTransparency); property color colOnLayer1: m3colors.m3onSurfaceVariant; property color colOnLayer1Inactive: ColorUtils.mix(colOnLayer1, colLayer1, 0.45); - property color colLayer2: ColorUtils.mix(m3colors.m3surfaceContainer, m3colors.m3surfaceContainerHigh, 0.55); + property color colLayer2: ColorUtils.transparentize(ColorUtils.mix(m3colors.m3surfaceContainer, m3colors.m3surfaceContainerHigh, 0.55), root.contentTransparency) property color colOnLayer2: m3colors.m3onSurface; property color colOnLayer2Disabled: ColorUtils.mix(colOnLayer2, m3colors.m3background, 0.4); - property color colLayer3: ColorUtils.mix(m3colors.m3surfaceContainerHigh, m3colors.m3onSurface, 0.96); + property color colLayer3: ColorUtils.transparentize(ColorUtils.mix(m3colors.m3surfaceContainerHigh, m3colors.m3onSurface, 0.96), root.contentTransparency) property color colOnLayer3: m3colors.m3onSurface; - property color colLayer1Hover: ColorUtils.mix(colLayer1, colOnLayer1, 0.92); - property color colLayer1Active: ColorUtils.mix(colLayer1, colOnLayer1, 0.85); - property color colLayer2Hover: ColorUtils.mix(colLayer2, colOnLayer2, 0.90); - property color colLayer2Active: ColorUtils.mix(colLayer2, colOnLayer2, 0.80); - property color colLayer2Disabled: ColorUtils.mix(colLayer2, m3colors.m3background, 0.8); - property color colLayer3Hover: ColorUtils.mix(colLayer3, colOnLayer3, 0.90); - property color colLayer3Active: ColorUtils.mix(colLayer3, colOnLayer3, 0.80); - property color colPrimaryHover: ColorUtils.mix(m3colors.m3primary, colLayer1Hover, 0.87) - property color colPrimaryActive: ColorUtils.mix(m3colors.m3primary, colLayer1Active, 0.7) - property color colPrimaryContainerHover: ColorUtils.mix(m3colors.m3primaryContainer, colLayer1Hover, 0.7) - property color colPrimaryContainerActive: ColorUtils.mix(m3colors.m3primaryContainer, colLayer1Active, 0.6) + 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 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 colPrimary: m3colors.m3primary + property color colPrimaryHover: ColorUtils.mix(colors.colPrimary, colLayer1Hover, 0.87) + property color colPrimaryActive: ColorUtils.mix(colors.colPrimary, colLayer1Active, 0.7) + property color colPrimaryContainer: m3colors.m3primaryContainer + property color colPrimaryContainerHover: ColorUtils.mix(colors.colPrimaryContainer, colLayer1Hover, 0.7) + property color colPrimaryContainerActive: ColorUtils.mix(colors.colPrimaryContainer, colLayer1Active, 0.6) property color colSecondaryHover: ColorUtils.mix(m3colors.m3secondary, colLayer1Hover, 0.85) property color colSecondaryActive: ColorUtils.mix(m3colors.m3secondary, colLayer1Active, 0.4) property color colSecondaryContainerHover: ColorUtils.mix(m3colors.m3secondaryContainer, colLayer1Hover, 0.6) diff --git a/.config/quickshell/modules/common/ConfigOptions.qml b/.config/quickshell/modules/common/ConfigOptions.qml index 208223261..34709a887 100644 --- a/.config/quickshell/modules/common/ConfigOptions.qml +++ b/.config/quickshell/modules/common/ConfigOptions.qml @@ -21,10 +21,15 @@ Singleton { property string terminal: "foot" // This is only for shell actions } + property QtObject battery: QtObject { + property int low: 20 + property int critical: 5 + property int suspend: 2 + } + property QtObject bar: QtObject { property bool bottom: false // Instead of top property bool borderless: true - property int batteryLowThreshold: 20 property string topLeftIcon: "spark" // Options: distro, spark property bool showBackground: true property QtObject resources: QtObject { @@ -43,6 +48,9 @@ Singleton { property real height: 60 property real hoverRegionHeight: 3 property bool pinnedOnStartup: false + property list pinnedApps: [ // IDs of pinned entries + "org.kde.dolphin", + ] } property QtObject networking: QtObject { diff --git a/.config/quickshell/modules/common/widgets/DialogButton.qml b/.config/quickshell/modules/common/widgets/DialogButton.qml index 977e9b95d..86150c502 100644 --- a/.config/quickshell/modules/common/widgets/DialogButton.qml +++ b/.config/quickshell/modules/common/widgets/DialogButton.qml @@ -17,7 +17,7 @@ RippleButton { implicitWidth: buttonTextWidget.implicitWidth + 15 * 2 buttonRadius: Appearance?.rounding.full ?? 9999 - property color colEnabled: Appearance?.m3colors.m3primary ?? "#65558F" + property color colEnabled: Appearance?.colors.colPrimary ?? "#65558F" property color colDisabled: Appearance?.m3colors.m3outline ?? "#8D8C96" contentItem: StyledText { diff --git a/.config/quickshell/modules/common/widgets/GroupButton.qml b/.config/quickshell/modules/common/widgets/GroupButton.qml index 1f0776194..76aa5be0e 100644 --- a/.config/quickshell/modules/common/widgets/GroupButton.qml +++ b/.config/quickshell/modules/common/widgets/GroupButton.qml @@ -44,7 +44,7 @@ Button { property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent" property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED" property color colBackgroundActive: Appearance?.colors.colLayer1Active ?? "#D6CEE2" - property color colBackgroundToggled: Appearance?.m3colors.m3primary ?? "#65558F" + property color colBackgroundToggled: Appearance?.colors.colPrimary ?? "#65558F" property color colBackgroundToggledHover: Appearance?.colors.colPrimaryHover ?? "#77699C" property color colBackgroundToggledActive: Appearance?.colors.colPrimaryActive ?? "#D6CEE2" diff --git a/.config/quickshell/modules/common/widgets/PrimaryTabBar.qml b/.config/quickshell/modules/common/widgets/PrimaryTabBar.qml index accf17ab4..72ec166f2 100644 --- a/.config/quickshell/modules/common/widgets/PrimaryTabBar.qml +++ b/.config/quickshell/modules/common/widgets/PrimaryTabBar.qml @@ -10,7 +10,7 @@ ColumnLayout { required property var tabButtonList // Something like [{"icon": "notifications", "name": qsTr("Notifications")}, {"icon": "volume_up", "name": qsTr("Volume mixer")}] required property var externalTrackedTab property bool enableIndicatorAnimation: false - property color colIndicator: Appearance?.m3colors.m3primary ?? "#65558F" + property color colIndicator: Appearance?.colors.colPrimary ?? "#65558F" property color colBorder: Appearance?.m3colors.m3outlineVariant ?? "#C6C6D0" signal currentIndexChanged(int index) diff --git a/.config/quickshell/modules/common/widgets/PrimaryTabButton.qml b/.config/quickshell/modules/common/widgets/PrimaryTabButton.qml index 3a2879adc..73502cbcd 100644 --- a/.config/quickshell/modules/common/widgets/PrimaryTabButton.qml +++ b/.config/quickshell/modules/common/widgets/PrimaryTabButton.qml @@ -20,7 +20,7 @@ TabButton { property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent" property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED" property color colRipple: Appearance?.colors.colLayer1Active ?? "#D6CEE2" - property color colActive: Appearance?.m3colors.m3primary ?? "#65558F" + property color colActive: Appearance?.colors.colPrimary ?? "#65558F" property color colInactive: Appearance?.colors.colOnLayer1 ?? "#45464F" component RippleAnim: NumberAnimation { diff --git a/.config/quickshell/modules/common/widgets/RippleButton.qml b/.config/quickshell/modules/common/widgets/RippleButton.qml index 3e4868405..cd0d47a98 100644 --- a/.config/quickshell/modules/common/widgets/RippleButton.qml +++ b/.config/quickshell/modules/common/widgets/RippleButton.qml @@ -25,7 +25,7 @@ Button { property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent" property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED" - property color colBackgroundToggled: Appearance?.m3colors.m3primary ?? "#65558F" + property color colBackgroundToggled: Appearance?.colors.colPrimary ?? "#65558F" property color colBackgroundToggledHover: Appearance?.colors.colPrimaryHover ?? "#77699C" property color colRipple: Appearance?.colors.colLayer1Active ?? "#D6CEE2" property color colRippleToggled: Appearance?.colors.colPrimaryActive ?? "#D6CEE2" diff --git a/.config/quickshell/modules/common/widgets/SecondaryTabButton.qml b/.config/quickshell/modules/common/widgets/SecondaryTabButton.qml index 44677deb7..1d3b6381f 100644 --- a/.config/quickshell/modules/common/widgets/SecondaryTabButton.qml +++ b/.config/quickshell/modules/common/widgets/SecondaryTabButton.qml @@ -142,7 +142,7 @@ TabButton { text: buttonIcon iconSize: Appearance.font.pixelSize.huge fill: selected ? 1 : 0 - color: selected ? Appearance.m3colors.m3primary : Appearance.colors.colOnLayer1 + color: selected ? Appearance.colors.colPrimary : Appearance.colors.colOnLayer1 Behavior on color { animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this) } @@ -152,7 +152,7 @@ TabButton { id: buttonTextWidget verticalAlignment: Text.AlignVCenter font.pixelSize: Appearance.font.pixelSize.small - color: selected ? Appearance.m3colors.m3primary : Appearance.colors.colOnLayer1 + color: selected ? Appearance.colors.colPrimary : Appearance.colors.colOnLayer1 text: buttonText Behavior on color { animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this) diff --git a/.config/quickshell/modules/common/widgets/StyledProgressBar.qml b/.config/quickshell/modules/common/widgets/StyledProgressBar.qml index c5fdbf78f..5235357e3 100644 --- a/.config/quickshell/modules/common/widgets/StyledProgressBar.qml +++ b/.config/quickshell/modules/common/widgets/StyledProgressBar.qml @@ -16,7 +16,7 @@ ProgressBar { property real valueBarWidth: 120 property real valueBarHeight: 4 property real valueBarGap: 4 - property color highlightColor: Appearance?.m3colors.m3primary ?? "#685496" + property color highlightColor: Appearance?.colors.colPrimary ?? "#685496" property color trackColor: Appearance?.m3colors.m3secondaryContainer ?? "#F1D3F9" Behavior on value { diff --git a/.config/quickshell/modules/common/widgets/StyledRadioButton.qml b/.config/quickshell/modules/common/widgets/StyledRadioButton.qml index f665a3f13..3ef1ee8ad 100644 --- a/.config/quickshell/modules/common/widgets/StyledRadioButton.qml +++ b/.config/quickshell/modules/common/widgets/StyledRadioButton.qml @@ -12,7 +12,7 @@ RadioButton { id: root implicitHeight: 40 property string description - property color activeColor: Appearance?.m3colors.m3primary ?? "#685496" + property color activeColor: Appearance?.colors.colPrimary ?? "#685496" property color inactiveColor: Appearance?.m3colors.m3onSurfaceVariant ?? "#45464F" PointingHandInteraction {} @@ -39,7 +39,7 @@ RadioButton { width: checked ? 10 : 4 height: checked ? 10 : 4 radius: Appearance?.rounding.full - color: Appearance?.m3colors.m3primary + color: Appearance?.colors.colPrimary opacity: checked ? 1 : 0 Behavior on opacity { diff --git a/.config/quickshell/modules/common/widgets/StyledSlider.qml b/.config/quickshell/modules/common/widgets/StyledSlider.qml index 00aba779c..70491b8bb 100644 --- a/.config/quickshell/modules/common/widgets/StyledSlider.qml +++ b/.config/quickshell/modules/common/widgets/StyledSlider.qml @@ -18,7 +18,7 @@ Slider { property real handleHeight: 44 * scale property real handleLimit: root.backgroundDotMargins property real trackHeight: 30 * scale - property color highlightColor: Appearance.m3colors.m3primary + property color highlightColor: Appearance.colors.colPrimary property color trackColor: Appearance.m3colors.m3secondaryContainer property color handleColor: Appearance.m3colors.m3onSecondaryContainer property real trackRadius: Appearance.rounding.verysmall * scale diff --git a/.config/quickshell/modules/common/widgets/StyledSwitch.qml b/.config/quickshell/modules/common/widgets/StyledSwitch.qml index 5342d41ce..bbc2ae513 100644 --- a/.config/quickshell/modules/common/widgets/StyledSwitch.qml +++ b/.config/quickshell/modules/common/widgets/StyledSwitch.qml @@ -12,7 +12,7 @@ Switch { property real scale: 1 implicitHeight: 32 * root.scale implicitWidth: 52 * root.scale - property color activeColor: Appearance?.m3colors.m3primary ?? "#685496" + property color activeColor: Appearance?.colors.colPrimary ?? "#685496" property color inactiveColor: Appearance?.m3colors.m3surfaceContainerHighest ?? "#45464F" PointingHandInteraction {} diff --git a/.config/quickshell/modules/mediaControls/PlayerControl.qml b/.config/quickshell/modules/mediaControls/PlayerControl.qml index 530726900..16be41b83 100644 --- a/.config/quickshell/modules/mediaControls/PlayerControl.qml +++ b/.config/quickshell/modules/mediaControls/PlayerControl.qml @@ -93,7 +93,7 @@ Item { // Player instance property color colOnLayer0: ColorUtils.mix(Appearance.colors.colOnLayer0, artDominantColor, 0.5) property color colOnLayer1: ColorUtils.mix(Appearance.colors.colOnLayer1, artDominantColor, 0.5) property color colSubtext: ColorUtils.mix(Appearance.colors.colOnLayer1, artDominantColor, 0.5) - property color colPrimary: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.m3colors.m3primary, artDominantColor), artDominantColor, 0.5) + property color colPrimary: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colPrimary, artDominantColor), artDominantColor, 0.5) property color colPrimaryHover: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colPrimaryHover, artDominantColor), artDominantColor, 0.3) property color colPrimaryActive: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colPrimaryActive, artDominantColor), artDominantColor, 0.3) property color colSecondaryContainer: ColorUtils.mix(Appearance.m3colors.m3secondaryContainer, artDominantColor, 0.3) diff --git a/.config/quickshell/modules/overview/SearchItem.qml b/.config/quickshell/modules/overview/SearchItem.qml index 0191ef3e9..e76067c49 100644 --- a/.config/quickshell/modules/overview/SearchItem.qml +++ b/.config/quickshell/modules/overview/SearchItem.qml @@ -27,7 +27,7 @@ RippleButton { property string materialSymbol: entry?.materialSymbol ?? "" property string cliphistRawString: entry?.cliphistRawString ?? "" - property string highlightPrefix: `` + property string highlightPrefix: `` property string highlightSuffix: `` function highlightContent(content, query) { if (!query || query.length === 0 || content == query || fontType === "monospace") @@ -162,7 +162,7 @@ RippleButton { implicitWidth: activeText.implicitHeight implicitHeight: activeText.implicitHeight radius: Appearance.rounding.full - color: Appearance.m3colors.m3primary + color: Appearance.colors.colPrimary MaterialSymbol { id: activeText anchors.centerIn: parent diff --git a/.config/quickshell/modules/overview/SearchWidget.qml b/.config/quickshell/modules/overview/SearchWidget.qml index 351d9fb29..59740a06d 100644 --- a/.config/quickshell/modules/overview/SearchWidget.qml +++ b/.config/quickshell/modules/overview/SearchWidget.qml @@ -245,7 +245,7 @@ Item { // Wrapper cursorDelegate: Rectangle { width: 1 - color: searchInput.activeFocus ? Appearance.m3colors.m3primary : "transparent" + color: searchInput.activeFocus ? Appearance.colors.colPrimary : "transparent" radius: 1 } } diff --git a/.config/quickshell/modules/session/SessionActionButton.qml b/.config/quickshell/modules/session/SessionActionButton.qml index 1cf5a6e48..207305769 100644 --- a/.config/quickshell/modules/session/SessionActionButton.qml +++ b/.config/quickshell/modules/session/SessionActionButton.qml @@ -17,9 +17,9 @@ RippleButton { buttonRadius: (button.focus || button.down) ? size / 2 : Appearance.rounding.verylarge colBackground: button.keyboardDown ? Appearance.colors.colSecondaryContainerActive : - button.focus ? Appearance.m3colors.m3primary : + button.focus ? Appearance.colors.colPrimary : Appearance.m3colors.m3secondaryContainer - colBackgroundHover: Appearance.m3colors.m3primary + colBackgroundHover: Appearance.colors.colPrimary colRipple: Appearance.colors.colPrimaryActive property color colText: (button.down || button.keyboardDown || button.focus || button.hovered) ? Appearance.m3colors.m3onPrimary : Appearance.colors.colOnLayer0 diff --git a/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml b/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml index 441a35ca1..527ed6978 100644 --- a/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml +++ b/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml @@ -95,7 +95,7 @@ Item { x: tabBar.currentIndex * fullTabSize + (fullTabSize - targetWidth) / 2 - color: Appearance.m3colors.m3primary + color: Appearance.colors.colPrimary radius: Appearance.rounding.full Behavior on x { @@ -172,7 +172,7 @@ Item { id: fabBackground anchors.fill: parent radius: Appearance.rounding.normal - color: (fabButton.down) ? Appearance.colors.colPrimaryContainerActive : (fabButton.hovered ? Appearance.colors.colPrimaryContainerHover : Appearance.m3colors.m3primaryContainer) + color: (fabButton.down) ? Appearance.colors.colPrimaryContainerActive : (fabButton.hovered ? Appearance.colors.colPrimaryContainerHover : Appearance.colors.colPrimaryContainer) Behavior on color { animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this) @@ -274,13 +274,13 @@ Item { anchors.fill: parent radius: Appearance.rounding.verysmall border.width: 2 - border.color: todoInput.activeFocus ? Appearance.m3colors.m3primary : Appearance.m3colors.m3outline + border.color: todoInput.activeFocus ? Appearance.colors.colPrimary : Appearance.m3colors.m3outline color: "transparent" } cursorDelegate: Rectangle { width: 1 - color: todoInput.activeFocus ? Appearance.m3colors.m3primary : "transparent" + color: todoInput.activeFocus ? Appearance.colors.colPrimary : "transparent" radius: 1 } }