diff --git a/EXAMPLE.md b/EXAMPLE.md index 0d987ce..1963a40 100644 --- a/EXAMPLE.md +++ b/EXAMPLE.md @@ -149,51 +149,25 @@ Path: `~/.config/overzicht/colors.json` ```jsonc { - // Primary accent color, exposed as Appearance.colors.colPrimary for accent usage. - "primary": "#fb4934", - // Text/icon color intended to sit on top of primary surfaces. - "onPrimary": "#282828", - // Container variant of the primary accent color. - "primaryContainer": "#3c3836", - // Text/icon color intended to sit on top of primaryContainer surfaces. - "onPrimaryContainer": "#fbf1c7", - // Text/icon color intended to sit on top of secondary-colored surfaces. - "onSecondary": "#282828", - // Secondary container color, exposed as Appearance.colors.colSecondaryContainer. - "secondaryContainer": "#3c3836", - // Text/icon color intended to sit on top of secondaryContainer surfaces. - "onSecondaryContainer": "#fbf1c7", - // Default foreground color for generic text, including StyledText. - "onBackground": "#ebdbb2", - // Base surface tone; defined for theme completeness but not directly consumed by current overview widgets. - "surface": "#282828", - // Higher-emphasis surface tone; currently defined but not directly consumed by current overview widgets. - "surfaceContainerHigh": "#3c3836", - // Highest-emphasis surface tone; currently defined but not directly consumed by current overview widgets. - "surfaceContainerHighest": "#504945", - // Surface variant tone; currently defined but not directly consumed by current overview widgets. - "surfaceVariant": "#504945", - // Main panel/background color used for the overview container. - "background": "#3c3836", - // Secondary accent color used for the active workspace border. - "secondary": "#b8bb26", - // Workspace tile background color. - "surfaceContainerLow": "#282828", - // Window preview overlay base color. - "surfaceContainer": "#b8bb26", - // Foreground color for content placed on surfaceContainer surfaces. - "onSurface": "#282828", - // Foreground color used for workspace numbers and other content on low-emphasis surfaces. - "onSurfaceVariant": "#fbf1c7", - // Tooltip background color via Appearance.colors.colTooltip. - "inverseSurface": "#504945", - // Tooltip text color via Appearance.colors.colOnTooltip. - "inverseOnSurface": "#fbf1c7", - // Outline color used directly on preview borders and indirectly for subtext/outline roles. + // Active workspace accent. + "accent": "#b8bb26", + // Subtle border source mixed with the panel color. + "border": "#665c54", + // Window preview border source. "outline": "#fbf1c7", - // Variant outline color mixed into the overview panel border. - "outlineVariant": "#665c54", - // Shadow source color used for the overview drop shadow. - "shadow": "#282828" + // Overview panel background and default text. + "panel": "#3c3836", + "panelText": "#ebdbb2", + // Drop-shadow source color. + "shadow": "#282828", + // Tooltip background and text. The border derives from tooltipText. + "tooltip": "#504945", + "tooltipText": "#fbf1c7", + // Window overlay background and interaction-state foreground. + "window": "#b8bb26", + "windowText": "#282828", + // Workspace tile background and number color. + "workspace": "#282828", + "workspaceText": "#fbf1c7" } ``` diff --git a/common/Appearance.qml b/common/Appearance.qml index eb71f5f..f6266f9 100644 --- a/common/Appearance.qml +++ b/common/Appearance.qml @@ -39,7 +39,6 @@ Singleton { property string configDirectory: StandardPaths.standardLocations(StandardPaths.ConfigLocation)[0] property var themeData: ({}) - property QtObject palette property QtObject animation property QtObject animationCurves property QtObject colors @@ -62,55 +61,26 @@ Singleton { Component.onCompleted: themeData = parseThemeData() - palette: QtObject { - property color primary: root.themeValue(["primary"], "#E5B6F2") - property color onPrimary: root.themeValue(["onPrimary"], "#452152") - property color primaryContainer: root.themeValue(["primaryContainer"], "#5D386A") - property color onPrimaryContainer: root.themeValue(["onPrimaryContainer"], "#F9D8FF") - property color onSecondary: root.themeValue(["onSecondary"], "#392C3D") - property color secondaryContainer: root.themeValue(["secondaryContainer"], "#534457") - property color onSecondaryContainer: root.themeValue(["onSecondaryContainer"], "#F2DCF3") - property color onBackground: root.themeValue(["onBackground"], "#EAE0E7") - property color surface: root.themeValue(["surface"], "#161217") - property color surfaceContainerHigh: root.themeValue(["surfaceContainerHigh"], "#2D282E") - property color surfaceContainerHighest: root.themeValue(["surfaceContainerHighest"], "#383339") - property color surfaceVariant: root.themeValue(["surfaceVariant"], "#4C444D") - property color background: root.themeValue(["background"], "#161217") - property color secondary: root.themeValue(["secondary"], "#D5C0D7") - property color surfaceContainerLow: root.themeValue(["surfaceContainerLow"], "#1F1A1F") - property color surfaceContainer: root.themeValue(["surfaceContainer"], "#231E23") - property color onSurface: root.themeValue(["onSurface"], "#EAE0E7") - property color onSurfaceVariant: root.themeValue(["onSurfaceVariant"], "#CFC3CD") - property color inverseSurface: root.themeValue(["inverseSurface"], "#EAE0E7") - property color inverseOnSurface: root.themeValue(["inverseOnSurface"], "#342F34") - property color outline: root.themeValue(["outline"], "#988E97") - property color outlineVariant: root.themeValue(["outlineVariant"], "#4C444D") - property color shadow: root.themeValue(["shadow"], "#000000") - } - colors: QtObject { - property color colSubtext: palette.outline - property color colLayer0: palette.background - property color colOnLayer0: palette.onBackground - property color colLayer0Border: ColorUtils.mix(root.palette.outlineVariant, colLayer0, 0.4) - property color colLayer1: palette.surfaceContainerLow - property color colOnLayer1: palette.onSurfaceVariant - property color colOnLayer1Inactive: ColorUtils.mix(colOnLayer1, colLayer1, 0.45) - property color colLayer1Hover: ColorUtils.mix(colLayer1, colOnLayer1, 0.92) - property color colLayer1Active: ColorUtils.mix(colLayer1, colOnLayer1, 0.85) - property color colLayer2: palette.surfaceContainer - property color colOnLayer2: palette.onSurface - property color colLayer2Hover: ColorUtils.mix(colLayer2, colOnLayer2, 0.90) - property color colLayer2Active: ColorUtils.mix(colLayer2, colOnLayer2, 0.80) - property color colPrimary: palette.primary - property color colOnPrimary: palette.onPrimary - property color colSecondary: palette.secondary - property color colSecondaryContainer: palette.secondaryContainer - property color colOnSecondaryContainer: palette.onSecondaryContainer - property color colTooltip: palette.inverseSurface - property color colOnTooltip: palette.inverseOnSurface - property color colShadow: ColorUtils.transparentize(palette.shadow, 0.7) - property color colOutline: palette.outline + property color accent: root.themeValue(["accent"], root.themeValue(["secondary"], "#D5C0D7")) + property color border: root.themeValue(["border"], root.themeValue(["outlineVariant"], "#4C444D")) + property color outline: root.themeValue(["outline"], "#988E97") + property color panel: root.themeValue(["panel"], root.themeValue(["background"], "#161217")) + property color panelText: root.themeValue(["panelText"], root.themeValue(["onBackground"], "#EAE0E7")) + property color shadow: ColorUtils.transparentize(root.themeValue(["shadow"], "#000000"), 0.7) + property color tooltip: root.themeValue(["tooltip"], root.themeValue(["inverseSurface"], "#EAE0E7")) + property color tooltipText: root.themeValue(["tooltipText"], root.themeValue(["inverseOnSurface"], "#342F34")) + property color window: root.themeValue(["window"], root.themeValue(["surfaceContainer"], "#231E23")) + property color windowText: root.themeValue(["windowText"], root.themeValue(["onSurface"], "#EAE0E7")) + property color workspace: root.themeValue(["workspace"], root.themeValue(["surfaceContainerLow"], "#1F1A1F")) + property color workspaceText: root.themeValue(["workspaceText"], root.themeValue(["onSurfaceVariant"], "#CFC3CD")) + + readonly property color panelBorder: ColorUtils.mix(border, panel, 0.4) + readonly property color tooltipBorder: ColorUtils.transparentize(tooltipText, 0.7) + readonly property color windowActive: ColorUtils.mix(window, windowText, 0.80) + readonly property color windowBorder: ColorUtils.transparentize(outline, 0.7) + readonly property color windowHover: ColorUtils.mix(window, windowText, 0.90) + readonly property color workspaceHover: ColorUtils.mix(workspace, workspaceText, 0.92) } rounding: QtObject { diff --git a/common/widgets/StyledRectangularShadow.qml b/common/widgets/StyledRectangularShadow.qml index b5080a2..6f118c1 100644 --- a/common/widgets/StyledRectangularShadow.qml +++ b/common/widgets/StyledRectangularShadow.qml @@ -9,6 +9,6 @@ RectangularShadow { blur: 0.9 * Appearance.sizes.elevationMargin offset: Qt.vector2d(0.0, 1.0) spread: 1 - color: Appearance.colors.colShadow + color: Appearance.colors.shadow cached: true } diff --git a/common/widgets/StyledText.qml b/common/widgets/StyledText.qml index 829d22e..9914c59 100644 --- a/common/widgets/StyledText.qml +++ b/common/widgets/StyledText.qml @@ -12,5 +12,5 @@ Text { family: Appearance?.font.family.main ?? "sans-serif" pixelSize: Appearance?.font.pixelSize.small ?? 15 } - color: Appearance?.palette.onBackground ?? "white" + color: Appearance?.colors.panelText ?? "white" } diff --git a/common/widgets/StyledToolTipContent.qml b/common/widgets/StyledToolTipContent.qml index d3d6b23..6cd8611 100644 --- a/common/widgets/StyledToolTipContent.qml +++ b/common/widgets/StyledToolTipContent.qml @@ -23,10 +23,10 @@ Item { bottom: root.bottom horizontalCenter: root.horizontalCenter } - color: Appearance?.colors.colTooltip + color: Appearance?.colors.tooltip radius: Appearance?.rounding.verysmall border.width: 1 - border.color: ColorUtils.transparentize(Appearance?.palette.outline, 0.7) + border.color: Appearance?.colors.tooltipBorder opacity: shown ? 1 : 0 implicitWidth: shown || !root.collapseWhenHidden ? (tooltipTextObject.implicitWidth + 2 * root.horizontalPadding) : 0 implicitHeight: shown || !root.collapseWhenHidden ? (tooltipTextObject.implicitHeight + 2 * root.verticalPadding) : 0 @@ -55,7 +55,7 @@ Item { text: root.text font.pixelSize: Appearance?.font.pixelSize.smaller ?? 14 font.hintingPreference: Font.PreferNoHinting - color: Appearance?.colors.colOnTooltip ?? "#FFFFFF" + color: Appearance?.colors.tooltipText ?? "#FFFFFF" wrapMode: Text.Wrap } } diff --git a/modules/overview/OverviewWidget.qml b/modules/overview/OverviewWidget.qml index 1cc0a0c..ad2e840 100644 --- a/modules/overview/OverviewWidget.qml +++ b/modules/overview/OverviewWidget.qml @@ -26,7 +26,7 @@ Item { property var windowByAddress: HyprlandData.windowByAddress property var monitorData: HyprlandData.monitors.find(m => m.id === root.monitor?.id) property real scale: Config.options.overview.scale - property color activeBorderColor: Appearance.colors.colSecondary + property color activeBorderColor: Appearance.colors.accent property real workspaceImplicitWidth: Math.round((monitorData?.transform % 2 === 1) ? ((monitor.height / monitor.scale - (monitorData?.reserved?.[0] ?? 0) - (monitorData?.reserved?.[2] ?? 0)) * root.scale) : ((monitor.width / monitor.scale - (monitorData?.reserved?.[0] ?? 0) - (monitorData?.reserved?.[2] ?? 0)) * root.scale)) property real workspaceImplicitHeight: Math.round((monitorData?.transform % 2 === 1) ? ((monitor.width / monitor.scale - (monitorData?.reserved?.[1] ?? 0) - (monitorData?.reserved?.[3] ?? 0)) * root.scale) : ((monitor.height / monitor.scale - (monitorData?.reserved?.[1] ?? 0) - (monitorData?.reserved?.[3] ?? 0)) * root.scale)) @@ -184,9 +184,9 @@ Item { implicitHeight: workspaceColumnLayout.implicitHeight + padding * 2 radius: root.screenRounding clip: true - color: ColorUtils.applyAlpha(Appearance.colors.colLayer0, root.panelOpacity) + color: ColorUtils.applyAlpha(Appearance.colors.panel, root.panelOpacity) border.width: 1 - border.color: ColorUtils.applyAlpha(Appearance.colors.colLayer0Border, root.panelOpacity) + border.color: ColorUtils.applyAlpha(Appearance.colors.panelBorder, root.panelOpacity) MouseArea { anchors.fill: parent @@ -215,10 +215,18 @@ Item { id: workspace property int colIndex: index property int workspaceValue: root.getWorkspaceInCell(rowIndex, colIndex) + readonly property bool hasWindows: { + const windows = root.windowByAddress; + for (const address in windows) { + if (windows[address]?.workspace?.id === workspaceValue) + return true; + } + return false; + } property bool showWallpaper: root.hasEmptyWorkspaceWallpaper - property color defaultWorkspaceColor: Appearance.colors.colLayer1 - property color hoveredWorkspaceColor: ColorUtils.mix(defaultWorkspaceColor, Appearance.colors.colLayer1Hover, 0.1) - property color hoveredBorderColor: Appearance.colors.colLayer2Hover + property color defaultWorkspaceColor: Appearance.colors.workspace + property color hoveredWorkspaceColor: ColorUtils.mix(defaultWorkspaceColor, Appearance.colors.workspaceHover, 0.1) + property color hoveredBorderColor: Appearance.colors.windowHover property bool hoveredWhileDragging: false implicitWidth: root.workspaceImplicitWidth @@ -226,8 +234,7 @@ Item { clip: showWallpaper color: showWallpaper ? "transparent" : ColorUtils.applyAlpha(hoveredWhileDragging ? hoveredWorkspaceColor : defaultWorkspaceColor, root.workspaceOpacity) radius: root.screenRounding - border.width: 2 - border.color: hoveredWhileDragging ? hoveredBorderColor : "transparent" + border.width: 0 Image { id: workspaceWallpaper @@ -277,7 +284,7 @@ Item { weight: Font.DemiBold family: Appearance.font.family.expressive } - color: ColorUtils.transparentize(Appearance.colors.colOnLayer1, 0.8) + color: ColorUtils.transparentize(Appearance.colors.workspaceText, 0.8) horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } @@ -308,6 +315,15 @@ Item { root.draggingTargetWorkspace = -1; } } + + Rectangle { + anchors.fill: parent + visible: workspace.hoveredWhileDragging || !workspace.hasWindows + color: "transparent" + radius: workspace.radius + border.width: workspace.hoveredWhileDragging ? 2 : 1 + border.color: workspace.hoveredWhileDragging ? workspace.hoveredBorderColor : Appearance.colors.panelBorder + } } } } diff --git a/modules/overview/OverviewWindow.qml b/modules/overview/OverviewWindow.qml index e19ae71..cc18b59 100644 --- a/modules/overview/OverviewWindow.qml +++ b/modules/overview/OverviewWindow.qml @@ -108,7 +108,7 @@ Item { // Window visible: (root.windowData?.monitor ?? -1) === root.widgetMonitorId anchors.fill: parent radius: root.windowRounding - color: Appearance.colors.colLayer1 + color: Appearance.colors.workspace } ScreencopyView { @@ -136,8 +136,8 @@ Item { // Window Rectangle { anchors.fill: parent radius: root.windowRounding - color: pressed ? ColorUtils.applyAlpha(Appearance.colors.colLayer2Active, Math.min(1, root.windowOverlayOpacity + 0.30)) : hovered ? ColorUtils.applyAlpha(Appearance.colors.colLayer2Hover, Math.min(1, root.windowOverlayOpacity + 0.20)) : ColorUtils.transparentize(Appearance.colors.colLayer2) - border.color: ColorUtils.transparentize(Appearance.palette.outline, 0.7) + color: pressed ? ColorUtils.applyAlpha(Appearance.colors.windowActive, Math.min(1, root.windowOverlayOpacity + 0.30)) : hovered ? ColorUtils.applyAlpha(Appearance.colors.windowHover, Math.min(1, root.windowOverlayOpacity + 0.20)) : ColorUtils.transparentize(Appearance.colors.window) + border.color: Appearance.colors.windowBorder border.width: 1 ColumnLayout {