easy transparency for yoinkers

This commit is contained in:
end-4
2025-05-31 01:39:06 +02:00
parent 42abc57b65
commit 92947e3360
18 changed files with 57 additions and 41 deletions
@@ -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
}
@@ -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)
@@ -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<string> pinnedApps: [ // IDs of pinned entries
"org.kde.dolphin",
]
}
property QtObject networking: QtObject {
@@ -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 {
@@ -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"
@@ -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)
@@ -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 {
@@ -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"
@@ -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)
@@ -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 {
@@ -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 {
@@ -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
@@ -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 {}
@@ -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)
@@ -27,7 +27,7 @@ RippleButton {
property string materialSymbol: entry?.materialSymbol ?? ""
property string cliphistRawString: entry?.cliphistRawString ?? ""
property string highlightPrefix: `<u><font color="${Appearance.m3colors.m3primary}">`
property string highlightPrefix: `<u><font color="${Appearance.colors.colPrimary}">`
property string highlightSuffix: `</font></u>`
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
@@ -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
}
}
@@ -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
@@ -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
}
}