From 1fdaf24526ae688251307f2756bcdb9d7592e383 Mon Sep 17 00:00:00 2001 From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> Date: Mon, 5 May 2025 14:50:18 +1000 Subject: refactor: move colours to separate service --- config/Appearance.qml | 123 ------------------ modules/background/Border.qml | 3 +- modules/bar/Panel.qml | 27 ++-- modules/bar/Pills.qml | 2 +- modules/bar/components/ActiveWindow.qml | 2 +- modules/bar/components/Clock.qml | 2 +- modules/bar/components/OsIcon.qml | 3 +- modules/bar/components/Power.qml | 3 +- modules/bar/components/StatusIcons.qml | 2 +- modules/bar/components/Tray.qml | 3 +- .../bar/components/workspaces/ActiveIndicator.qml | 2 +- modules/bar/components/workspaces/OccupiedBg.qml | 3 +- modules/bar/components/workspaces/Workspace.qml | 4 +- modules/bar/components/workspaces/Workspaces.qml | 2 +- modules/launcher/ActionItem.qml | 4 +- modules/launcher/AppItem.qml | 3 +- modules/launcher/AppList.qml | 2 +- modules/launcher/Background.qml | 5 +- modules/launcher/Content.qml | 5 +- modules/launcher/ContentList.qml | 4 +- modules/launcher/WallpaperItem.qml | 2 +- modules/osd/Background.qml | 5 +- services/Colours.qml | 138 +++++++++++++++++++++ widgets/LayerShadow.qml | 4 +- widgets/StateLayer.qml | 3 +- widgets/StyledScrollBar.qml | 5 +- widgets/StyledText.qml | 3 +- widgets/StyledTextField.qml | 7 +- widgets/VerticalSlider.qml | 11 +- 29 files changed, 205 insertions(+), 177 deletions(-) create mode 100644 services/Colours.qml diff --git a/config/Appearance.qml b/config/Appearance.qml index 1a5f58a..24f98cf 100644 --- a/config/Appearance.qml +++ b/config/Appearance.qml @@ -8,62 +8,11 @@ import Qt.labs.platform Singleton { id: root - property bool light: false - readonly property Transparency transparency: Transparency {} readonly property Rounding rounding: Rounding {} readonly property Spacing spacing: Spacing {} readonly property Padding padding: Padding {} readonly property Font font: Font {} readonly property Anim anim: Anim {} - readonly property Colours colours: Colours {} - - function alpha(c: color, layer: bool): color { - if (!transparency.enabled) - return c; - c = Qt.rgba(c.r, c.g, c.b, layer ? transparency.layers : transparency.base); - if (layer) - c.hsvValue = Math.max(0, Math.min(1, c.hslLightness + (light ? -0.2 : 0.2))); // TODO: edit based on colours (hue or smth) - return c; - } - - function on(c: color): color { - if (c.hslLightness < 0.5) - return Qt.hsla(c.hslHue, c.hslSaturation, 0.9, 1); - return Qt.hsla(c.hslHue, c.hslSaturation, 0.2, 1); - } - - FileView { - path: `${StandardPaths.standardLocations(StandardPaths.GenericStateLocation)[0]}/caelestia/scheme/current-mode.txt` - watchChanges: true - onFileChanged: this.reload() - onLoaded: root.light = this.text() === "light" - } - - FileView { - readonly property list colourNames: ["rosewater", "flamingo", "pink", "mauve", "red", "maroon", "peach", "yellow", "green", "teal", "sky", "sapphire", "blue", "lavender"] - - path: `${StandardPaths.standardLocations(StandardPaths.GenericStateLocation)[0]}/caelestia/scheme/current.txt` - watchChanges: true - onFileChanged: this.reload() - onLoaded: { - const contents = this.text(); - const colours = root.colours; - - for (const line of contents.split("\n")) { - let [name, colour] = line.split(" "); - name = name.trim(); - name = colourNames.includes(name) ? name : `m3${name}`; - if (colours.hasOwnProperty(name)) - colours[name] = `#${colour.trim()}`; - } - } - } - - component Transparency: QtObject { - readonly property bool enabled: false - readonly property real base: 0.78 - readonly property real layers: 0.58 - } component Rounding: QtObject { readonly property int small: 12 @@ -128,76 +77,4 @@ Singleton { readonly property AnimCurves curves: AnimCurves {} readonly property AnimDurations durations: AnimDurations {} } - - component Colours: QtObject { - property color m3primary_paletteKeyColor: "#7870AB" - property color m3secondary_paletteKeyColor: "#78748A" - property color m3tertiary_paletteKeyColor: "#976A7D" - property color m3neutral_paletteKeyColor: "#79767D" - property color m3neutral_variant_paletteKeyColor: "#797680" - property color m3background: "#141318" - property color m3onBackground: "#E5E1E9" - property color m3surface: "#141318" - property color m3surfaceDim: "#141318" - property color m3surfaceBright: "#3A383E" - property color m3surfaceContainerLowest: "#0E0D13" - property color m3surfaceContainerLow: "#1C1B20" - property color m3surfaceContainer: "#201F25" - property color m3surfaceContainerHigh: "#2B292F" - property color m3surfaceContainerHighest: "#35343A" - property color m3onSurface: "#E5E1E9" - property color m3surfaceVariant: "#48454E" - property color m3onSurfaceVariant: "#C9C5D0" - property color m3inverseSurface: "#E5E1E9" - property color m3inverseOnSurface: "#312F36" - property color m3outline: "#938F99" - property color m3outlineVariant: "#48454E" - property color m3shadow: "#000000" - property color m3scrim: "#000000" - property color m3surfaceTint: "#C8BFFF" - property color m3primary: "#C8BFFF" - property color m3onPrimary: "#30285F" - property color m3primaryContainer: "#473F77" - property color m3onPrimaryContainer: "#E5DEFF" - property color m3inversePrimary: "#5F5791" - property color m3secondary: "#C9C3DC" - property color m3onSecondary: "#312E41" - property color m3secondaryContainer: "#484459" - property color m3onSecondaryContainer: "#E5DFF9" - property color m3tertiary: "#ECB8CD" - property color m3onTertiary: "#482536" - property color m3tertiaryContainer: "#B38397" - property color m3onTertiaryContainer: "#000000" - property color m3error: "#EA8DC1" - property color m3onError: "#690005" - property color m3errorContainer: "#93000A" - property color m3onErrorContainer: "#FFDAD6" - property color m3primaryFixed: "#E5DEFF" - property color m3primaryFixedDim: "#C8BFFF" - property color m3onPrimaryFixed: "#1B1149" - property color m3onPrimaryFixedVariant: "#473F77" - property color m3secondaryFixed: "#E5DFF9" - property color m3secondaryFixedDim: "#C9C3DC" - property color m3onSecondaryFixed: "#1C192B" - property color m3onSecondaryFixedVariant: "#484459" - property color m3tertiaryFixed: "#FFD8E7" - property color m3tertiaryFixedDim: "#ECB8CD" - property color m3onTertiaryFixed: "#301121" - property color m3onTertiaryFixedVariant: "#613B4C" - - property color rosewater: "#B8C4FF" - property color flamingo: "#DBB9F8" - property color pink: "#F3B3E3" - property color mauve: "#D0BDFE" - property color red: "#F8B3D1" - property color maroon: "#F6B2DA" - property color peach: "#E4B7F4" - property color yellow: "#C3C0FF" - property color green: "#ADC6FF" - property color teal: "#D4BBFC" - property color sky: "#CBBEFF" - property color sapphire: "#BDC2FF" - property color blue: "#C7BFFF" - property color lavender: "#EAB5ED" - } } diff --git a/modules/background/Border.qml b/modules/background/Border.qml index a11c565..e944299 100644 --- a/modules/background/Border.qml +++ b/modules/background/Border.qml @@ -1,4 +1,5 @@ import "root:/widgets" +import "root:/services" import "root:/config" import Quickshell import QtQuick @@ -33,7 +34,7 @@ Scope { id: rect anchors.fill: parent - color: Appearance.alpha(Appearance.colours.m3surface, false) + color: Colours.alpha(Colours.palette.m3surface, false) visible: false } diff --git a/modules/bar/Panel.qml b/modules/bar/Panel.qml index 741fa13..9dd5797 100644 --- a/modules/bar/Panel.qml +++ b/modules/bar/Panel.qml @@ -1,4 +1,5 @@ import "root:/widgets" +import "root:/services" import "root:/config" import "components" import "components/workspaces" @@ -16,7 +17,7 @@ StyledRect { } vertical: BarConfig.vertical - color: Appearance.alpha(Appearance.colours.m3surface, false) + color: Colours.alpha(Colours.palette.m3surface, false) anchors.fill: parent BoxLayout { @@ -28,10 +29,10 @@ StyledRect { spacing: 0 Module { - color: Appearance.colours.mauve + color: Colours.palette.mauve OsIcon { - color: Appearance.on(Appearance.colours.mauve) + color: Colours.on(Colours.palette.mauve) anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter) anchors.verticalCenter: root.get(parent.verticalCenter, undefined) @@ -39,10 +40,10 @@ StyledRect { } Module { - color: Appearance.colours.pink + color: Colours.palette.pink ActiveWindow { - colour: Appearance.on(Appearance.colours.pink) + colour: Colours.on(Colours.palette.pink) anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter) anchors.verticalCenter: root.get(parent.verticalCenter, undefined) @@ -76,10 +77,10 @@ StyledRect { } Module { - color: Appearance.colours.green + color: Colours.palette.green Clock { - colour: Appearance.on(Appearance.colours.green) + colour: Colours.on(Colours.palette.green) anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter) anchors.verticalCenter: root.get(parent.verticalCenter, undefined) @@ -87,10 +88,10 @@ StyledRect { } Module { - color: Appearance.colours.yellow + color: Colours.palette.yellow Tray { - colour: Appearance.on(Appearance.colours.yellow) + colour: Colours.on(Colours.palette.yellow) anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter) anchors.verticalCenter: root.get(parent.verticalCenter, undefined) @@ -98,10 +99,10 @@ StyledRect { } Module { - color: Appearance.colours.peach + color: Colours.palette.peach StatusIcons { - colour: Appearance.on(Appearance.colours.peach) + colour: Colours.on(Colours.palette.peach) anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter) anchors.verticalCenter: root.get(parent.verticalCenter, undefined) @@ -109,7 +110,7 @@ StyledRect { } Module { - color: Appearance.colours.m3error + color: Colours.palette.m3error Layout.maximumWidth: BarConfig.sizes.height Layout.maximumHeight: BarConfig.sizes.height @@ -118,7 +119,7 @@ StyledRect { x: (BarConfig.sizes.height - width) / 2 y: (BarConfig.sizes.height - height) / 2 - color: Appearance.colours.m3onError + color: Colours.palette.m3onError anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter) anchors.verticalCenter: root.get(parent.verticalCenter, undefined) diff --git a/modules/bar/Pills.qml b/modules/bar/Pills.qml index bb9d08f..7af9d6d 100644 --- a/modules/bar/Pills.qml +++ b/modules/bar/Pills.qml @@ -125,7 +125,7 @@ BoxLayout { } component Pill: PaddedRect { - color: Appearance.alpha(Appearance.colours.m3surface, false) + color: Colours.alpha(Colours.palette.m3surface, false) radius: Appearance.rounding.full padding: BarConfig.vertical ? [Appearance.padding.large, 0] : [0, Appearance.padding.large] diff --git a/modules/bar/components/ActiveWindow.qml b/modules/bar/components/ActiveWindow.qml index de568dd..eeea3ac 100644 --- a/modules/bar/components/ActiveWindow.qml +++ b/modules/bar/components/ActiveWindow.qml @@ -9,7 +9,7 @@ import QtQuick StyledRect { id: root - property color colour: Appearance.colours.pink + property color colour: Colours.palette.pink animate: true clip: true diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml index f3e3701..3397222 100644 --- a/modules/bar/components/Clock.qml +++ b/modules/bar/components/Clock.qml @@ -6,7 +6,7 @@ import QtQuick StyledRect { id: root - property color colour: Appearance.colours.peach + property color colour: Colours.palette.peach MaterialIcon { id: icon diff --git a/modules/bar/components/OsIcon.qml b/modules/bar/components/OsIcon.qml index 0daa945..ce7d51b 100644 --- a/modules/bar/components/OsIcon.qml +++ b/modules/bar/components/OsIcon.qml @@ -1,4 +1,5 @@ import "root:/widgets" +import "root:/services" import "root:/utils" import "root:/config" @@ -6,5 +7,5 @@ StyledText { text: Icons.osIcon font.pointSize: Appearance.font.size.smaller font.family: Appearance.font.family.mono - color: Appearance.colours.yellow + color: Colours.palette.yellow } diff --git a/modules/bar/components/Power.qml b/modules/bar/components/Power.qml index 1124a55..7584747 100644 --- a/modules/bar/components/Power.qml +++ b/modules/bar/components/Power.qml @@ -1,9 +1,10 @@ import "root:/widgets" +import "root:/services" import "root:/config" MaterialIcon { text: "power_settings_new" - color: Appearance.colours.m3error + color: Colours.palette.m3error font.bold: true font.pointSize: Appearance.font.size.normal } diff --git a/modules/bar/components/StatusIcons.qml b/modules/bar/components/StatusIcons.qml index 2721cc9..cb5dc58 100644 --- a/modules/bar/components/StatusIcons.qml +++ b/modules/bar/components/StatusIcons.qml @@ -8,7 +8,7 @@ import QtQuick StyledRect { id: root - property color colour: Appearance.colours.rosewater + property color colour: Colours.palette.rosewater animate: true clip: true diff --git a/modules/bar/components/Tray.qml b/modules/bar/components/Tray.qml index 98a7dfe..a635b76 100644 --- a/modules/bar/components/Tray.qml +++ b/modules/bar/components/Tray.qml @@ -1,4 +1,5 @@ import "root:/widgets" +import "root:/services" import "root:/config" import Quickshell.Services.SystemTray import QtQuick @@ -6,7 +7,7 @@ import QtQuick StyledRect { id: root - property color colour: Appearance.colours.lavender + property color colour: Colours.palette.lavender animate: true clip: true diff --git a/modules/bar/components/workspaces/ActiveIndicator.qml b/modules/bar/components/workspaces/ActiveIndicator.qml index 2d43f19..a9d3e60 100644 --- a/modules/bar/components/workspaces/ActiveIndicator.qml +++ b/modules/bar/components/workspaces/ActiveIndicator.qml @@ -33,7 +33,7 @@ Rectangle { visible: false anchors.fill: parent - color: Appearance.on(root.color) + color: Colours.on(root.color) Behavior on color { ColorAnimation { diff --git a/modules/bar/components/workspaces/OccupiedBg.qml b/modules/bar/components/workspaces/OccupiedBg.qml index ccbc75f..ae9c333 100644 --- a/modules/bar/components/workspaces/OccupiedBg.qml +++ b/modules/bar/components/workspaces/OccupiedBg.qml @@ -1,6 +1,7 @@ pragma ComponentBehavior: Bound import "root:/widgets" +import "root:/services" import "root:/config" import Quickshell import QtQuick @@ -51,7 +52,7 @@ Item { readonly property Workspace start: root.workspaces[modelData.start - 1 - root.groupOffset] ?? null readonly property Workspace end: root.workspaces[modelData.end - 1 - root.groupOffset] ?? null - color: Appearance.alpha(Appearance.colours.m3surfaceContainerHigh, true) + color: Colours.alpha(Colours.palette.m3surfaceContainerHigh, true) radius: BarConfig.workspaces.rounded ? Appearance.rounding.full : 0 x: start?.x ?? 0 diff --git a/modules/bar/components/workspaces/Workspace.qml b/modules/bar/components/workspaces/Workspace.qml index 9edc8e4..7f4bc68 100644 --- a/modules/bar/components/workspaces/Workspace.qml +++ b/modules/bar/components/workspaces/Workspace.qml @@ -34,7 +34,7 @@ Item { animate: true text: Hyprland.activeWsId === root.ws ? activeLabel : root.isOccupied ? occupiedLabel : label - color: BarConfig.workspaces.occupiedBg || root.isOccupied || Hyprland.activeWsId === root.ws ? Appearance.colours.m3onSurface : Appearance.colours.m3outlineVariant + color: BarConfig.workspaces.occupiedBg || root.isOccupied || Hyprland.activeWsId === root.ws ? Colours.palette.m3onSurface : Colours.palette.m3outlineVariant horizontalAlignment: StyledText.AlignHCenter verticalAlignment: StyledText.AlignVCenter @@ -63,7 +63,7 @@ Item { required property Hyprland.Client modelData text: Icons.getAppCategoryIcon(modelData.wmClass, "terminal") - color: Appearance.colours.m3onSurfaceVariant + color: Colours.palette.m3onSurfaceVariant } } } diff --git a/modules/bar/components/workspaces/Workspaces.qml b/modules/bar/components/workspaces/Workspaces.qml index b2def7e..738f679 100644 --- a/modules/bar/components/workspaces/Workspaces.qml +++ b/modules/bar/components/workspaces/Workspaces.qml @@ -9,7 +9,7 @@ Item { id: root property alias vertical: layout.vertical - property color colour: Appearance.colours.mauve + property color colour: Colours.palette.mauve readonly property list workspaces: layout.children.filter(c => c.isWorkspace).sort((w1, w2) => w1.ws - w2.ws) readonly property var occupied: Hyprland.workspaces.values.reduce((acc, curr) => { diff --git a/modules/launcher/ActionItem.qml b/modules/launcher/ActionItem.qml index f23cf0a..f4f7e2f 100644 --- a/modules/launcher/ActionItem.qml +++ b/modules/launcher/ActionItem.qml @@ -1,6 +1,6 @@ import "root:/widgets" +import "root:/services" import "root:/config" -import Quickshell import QtQuick PaddedRect { @@ -50,7 +50,7 @@ PaddedRect { StyledText { text: root.modelData.desc font.pointSize: Appearance.font.size.small - color: Appearance.alpha(Appearance.colours.m3outline, true) + color: Colours.alpha(Colours.palette.m3outline, true) elide: Text.ElideRight width: root.width - icon.width - Appearance.rounding.normal * 2 diff --git a/modules/launcher/AppItem.qml b/modules/launcher/AppItem.qml index ea67682..dd0682f 100644 --- a/modules/launcher/AppItem.qml +++ b/modules/launcher/AppItem.qml @@ -1,4 +1,5 @@ import "root:/widgets" +import "root:/services" import "root:/config" import Quickshell import Quickshell.Widgets @@ -52,7 +53,7 @@ PaddedRect { StyledText { text: root.modelData.comment || root.modelData.genericName || root.modelData.name font.pointSize: Appearance.font.size.small - color: Appearance.alpha(Appearance.colours.m3outline, true) + color: Colours.alpha(Colours.palette.m3outline, true) elide: Text.ElideRight width: root.width - icon.width - Appearance.rounding.normal * 2 diff --git a/modules/launcher/AppList.qml b/modules/launcher/AppList.qml index 5dfdf8b..dc58402 100644 --- a/modules/launcher/AppList.qml +++ b/modules/launcher/AppList.qml @@ -39,7 +39,7 @@ ListView { highlight: StyledRect { radius: Appearance.rounding.normal - color: Appearance.alpha(Appearance.colours.m3surfaceContainerHigh, true) + color: Colours.alpha(Colours.palette.m3surfaceContainerHigh, true) } delegate: isAction ? actionItem : appItem diff --git a/modules/launcher/Background.qml b/modules/launcher/Background.qml index 7bffd26..7dce14a 100644 --- a/modules/launcher/Background.qml +++ b/modules/launcher/Background.qml @@ -1,3 +1,4 @@ +import "root:/services" import "root:/config" import QtQuick import QtQuick.Shapes @@ -12,11 +13,11 @@ Shape { readonly property real wrapperHeight: realWrapperHeight - 1 // Pixel issues :sob: preferredRendererType: Shape.CurveRenderer - opacity: Appearance.transparency.enabled ? Appearance.transparency.base : 1 + opacity: Colours.transparency.enabled ? Colours.transparency.base : 1 ShapePath { strokeWidth: -1 - fillColor: Appearance.colours.m3surface + fillColor: Colours.palette.m3surface startY: root.wrapperHeight diff --git a/modules/launcher/Content.qml b/modules/launcher/Content.qml index 41904f7..6ecced5 100644 --- a/modules/launcher/Content.qml +++ b/modules/launcher/Content.qml @@ -5,7 +5,6 @@ import "root:/services" import "root:/config" import Quickshell import QtQuick -import QtQuick.Controls Item { id: root @@ -24,7 +23,7 @@ Item { StyledRect { id: listWrapper - color: Appearance.alpha(Appearance.colours.m3surfaceContainer, true) + color: Colours.alpha(Colours.palette.m3surfaceContainer, true) radius: root.rounding implicitWidth: list.width + root.padding * 2 @@ -61,7 +60,7 @@ Item { placeholderText: qsTr(`Type "${LauncherConfig.actionPrefix}" for commands`) background: StyledRect { - color: Appearance.alpha(Appearance.colours.m3surfaceContainer, true) + color: Colours.alpha(Colours.palette.m3surfaceContainer, true) radius: root.rounding } diff --git a/modules/launcher/ContentList.qml b/modules/launcher/ContentList.qml index 253bcf0..5f8c783 100644 --- a/modules/launcher/ContentList.qml +++ b/modules/launcher/ContentList.qml @@ -139,7 +139,7 @@ Item { id: icon text: "manage_search" - color: Appearance.colours.m3onSurfaceVariant + color: Colours.palette.m3onSurfaceVariant font.pointSize: Appearance.font.size.extraLarge anchors.verticalCenter: parent.verticalCenter @@ -153,7 +153,7 @@ Item { anchors.verticalCenter: parent.verticalCenter text: qsTr("No results") - color: Appearance.colours.m3onSurfaceVariant + color: Colours.palette.m3onSurfaceVariant font.pointSize: Appearance.font.size.larger font.weight: 500 } diff --git a/modules/launcher/WallpaperItem.qml b/modules/launcher/WallpaperItem.qml index c0b91d4..22f8eda 100644 --- a/modules/launcher/WallpaperItem.qml +++ b/modules/launcher/WallpaperItem.qml @@ -60,7 +60,7 @@ StyledRect { opacity: root.PathView.isCurrentItem ? 0.7 : 0 anchors.fill: mask radius: mask.radius - color: Appearance.colours.m3shadow + color: Colours.palette.m3shadow blur: 10 spread: 3 diff --git a/modules/osd/Background.qml b/modules/osd/Background.qml index d8a35b0..a24e3fb 100644 --- a/modules/osd/Background.qml +++ b/modules/osd/Background.qml @@ -1,3 +1,4 @@ +import "root:/services" import "root:/config" import QtQuick import QtQuick.Shapes @@ -12,11 +13,11 @@ Shape { readonly property real wrapperWidth: realWrapperWidth - 1 // Pixel issues :sob: preferredRendererType: Shape.CurveRenderer - opacity: Appearance.transparency.enabled ? Appearance.transparency.base : 1 + opacity: Colours.transparency.enabled ? Colours.transparency.base : 1 ShapePath { strokeWidth: -1 - fillColor: Appearance.colours.m3surface + fillColor: Colours.palette.m3surface startX: root.wrapperWidth diff --git a/services/Colours.qml b/services/Colours.qml new file mode 100644 index 0000000..27e0afd --- /dev/null +++ b/services/Colours.qml @@ -0,0 +1,138 @@ +pragma Singleton + +import "root:/config" +import Quickshell +import Quickshell.Io +import QtQuick +import Qt.labs.platform + +Singleton { + id: root + + readonly property list colourNames: ["rosewater", "flamingo", "pink", "mauve", "red", "maroon", "peach", "yellow", "green", "teal", "sky", "sapphire", "blue", "lavender"] + + property bool showPreview + property bool light + readonly property Colours palette: showPreview ? preview : current + readonly property Colours current: Colours {} + readonly property Colours preview: Colours {} + readonly property Transparency transparency: Transparency {} + + function alpha(c: color, layer: bool): color { + if (!transparency.enabled) + return c; + c = Qt.rgba(c.r, c.g, c.b, layer ? transparency.layers : transparency.base); + if (layer) + c.hsvValue = Math.max(0, Math.min(1, c.hslLightness + (light ? -0.2 : 0.2))); // TODO: edit based on colours (hue or smth) + return c; + } + + function on(c: color): color { + if (c.hslLightness < 0.5) + return Qt.hsla(c.hslHue, c.hslSaturation, 0.9, 1); + return Qt.hsla(c.hslHue, c.hslSaturation, 0.2, 1); + } + + function load(data: string, preview: bool): void { + const colours = preview ? preview : current; + for (const line of data.trim().split("\n")) { + let [name, colour] = line.split(" "); + name = name.trim(); + name = colourNames.includes(name) ? name : `m3${name}`; + if (colours.hasOwnProperty(name)) + colours[name] = `#${colour.trim()}`; + } + } + + FileView { + path: `${StandardPaths.standardLocations(StandardPaths.GenericStateLocation)[0]}/caelestia/scheme/current-mode.txt` + watchChanges: true + onFileChanged: reload() + onLoaded: root.light = text() === "light" + } + + FileView { + path: `${StandardPaths.standardLocations(StandardPaths.GenericStateLocation)[0]}/caelestia/scheme/current.txt` + watchChanges: true + onFileChanged: reload() + onLoaded: root.load(text(), false) + } + + component Transparency: QtObject { + readonly property bool enabled: false + readonly property real base: 0.78 + readonly property real layers: 0.58 + } + + component Colours: QtObject { + property color m3primary_paletteKeyColor: "#7870AB" + property color m3secondary_paletteKeyColor: "#78748A" + property color m3tertiary_paletteKeyColor: "#976A7D" + property color m3neutral_paletteKeyColor: "#79767D" + property color m3neutral_variant_paletteKeyColor: "#797680" + property color m3background: "#141318" + property color m3onBackground: "#E5E1E9" + property color m3surface: "#141318" + property color m3surfaceDim: "#141318" + property color m3surfaceBright: "#3A383E" + property color m3surfaceContainerLowest: "#0E0D13" + property color m3surfaceContainerLow: "#1C1B20" + property color m3surfaceContainer: "#201F25" + property color m3surfaceContainerHigh: "#2B292F" + property color m3surfaceContainerHighest: "#35343A" + property color m3onSurface: "#E5E1E9" + property color m3surfaceVariant: "#48454E" + property color m3onSurfaceVariant: "#C9C5D0" + property color m3inverseSurface: "#E5E1E9" + property color m3inverseOnSurface: "#312F36" + property color m3outline: "#938F99" + property color m3outlineVariant: "#48454E" + property color m3shadow: "#000000" + property color m3scrim: "#000000" + property color m3surfaceTint: "#C8BFFF" + property color m3primary: "#C8BFFF" + property color m3onPrimary: "#30285F" + property color m3primaryContainer: "#473F77" + property color m3onPrimaryContainer: "#E5DEFF" + property color m3inversePrimary: "#5F5791" + property color m3secondary: "#C9C3DC" + property color m3onSecondary: "#312E41" + property color m3secondaryContainer: "#484459" + property color m3onSecondaryContainer: "#E5DFF9" + property color m3tertiary: "#ECB8CD" + property color m3onTertiary: "#482536" + property color m3tertiaryContainer: "#B38397" + property color m3onTertiaryContainer: "#000000" + property color m3error: "#EA8DC1" + property color m3onError: "#690005" + property color m3errorContainer: "#93000A" + property color m3onErrorContainer: "#FFDAD6" + property color m3primaryFixed: "#E5DEFF" + property color m3primaryFixedDim: "#C8BFFF" + property color m3onPrimaryFixed: "#1B1149" + property color m3onPrimaryFixedVariant: "#473F77" + property color m3secondaryFixed: "#E5DFF9" + property color m3secondaryFixedDim: "#C9C3DC" + property color m3onSecondaryFixed: "#1C192B" + property color m3onSecondaryFixedVariant: "#484459" + property color m3tertiaryFixed: "#FFD8E7" + property color m3tertiaryFixedDim: "#ECB8CD" + property color m3onTertiaryFixed: "#301121" + property color m3onTertiaryFixedVariant: "#613B4C" + + property color rosewater: "#B8C4FF" + property color flamingo: "#DBB9F8" + property color pink: "#F3B3E3" + property color mauve: "#D0BDFE" + property color red: "#F8B3D1" + property color maroon: "#F6B2DA" + property color peach: "#E4B7F4" + property color yellow: "#C3C0FF" + property color green: "#ADC6FF" + property color teal: "#D4BBFC" + property color sky: "#CBBEFF" + property color sapphire: "#BDC2FF" + property color blue: "#C7BFFF" + property color lavender: "#EAB5ED" + } +} diff --git a/widgets/LayerShadow.qml b/widgets/LayerShadow.qml index 1694a8e..b5f84c9 100644 --- a/widgets/LayerShadow.qml +++ b/widgets/LayerShadow.qml @@ -1,9 +1,9 @@ -import "root:/config" +import "root:/services" import Qt5Compat.GraphicalEffects DropShadow { anchors.fill: source - color: Qt.alpha(Appearance.colours.m3shadow, 0.7) + color: Qt.alpha(Colours.palette.m3shadow, 0.7) radius: 10 samples: 1 + radius * 2 } diff --git a/widgets/StateLayer.qml b/widgets/StateLayer.qml index e1a7b61..4508453 100644 --- a/widgets/StateLayer.qml +++ b/widgets/StateLayer.qml @@ -1,4 +1,5 @@ import "root:/widgets" +import "root:/services" import "root:/config" import QtQuick @@ -10,7 +11,7 @@ Rectangle { anchors.fill: parent - color: Appearance.colours.m3onSurface + color: Colours.palette.m3onSurface opacity: mouse.pressed ? 0.1 : mouse.hovered ? 0.08 : 0 MouseArea { diff --git a/widgets/StyledScrollBar.qml b/widgets/StyledScrollBar.qml index 73b7451..a52bbd2 100644 --- a/widgets/StyledScrollBar.qml +++ b/widgets/StyledScrollBar.qml @@ -1,3 +1,4 @@ +import "root:/services" import "root:/config" import QtQuick import QtQuick.Controls @@ -8,7 +9,7 @@ ScrollBar { contentItem: StyledRect { opacity: root.pressed ? 0.8 : root.policy === ScrollBar.AlwaysOn || (root.active && root.size < 1) ? 0.6 : 0 radius: Appearance.rounding.full - color: Appearance.colours.m3secondary + color: Colours.palette.m3secondary Behavior on opacity { NumberAnimation { @@ -23,7 +24,7 @@ ScrollBar { implicitWidth: 10 opacity: root.policy === ScrollBar.AlwaysOn || (root.active && root.size < 1) ? 0.4 : 0 radius: Appearance.rounding.full - color: Appearance.colours.m3surfaceContainerLow + color: Colours.palette.m3surfaceContainerLow Behavior on opacity { NumberAnimation { diff --git a/widgets/StyledText.qml b/widgets/StyledText.qml index f95414f..9e4be48 100644 --- a/widgets/StyledText.qml +++ b/widgets/StyledText.qml @@ -1,5 +1,6 @@ pragma ComponentBehavior: Bound +import "root:/services" import "root:/config" import QtQuick @@ -11,7 +12,7 @@ Text { property int animateDuration: Appearance.anim.durations.normal renderType: Text.NativeRendering - color: Appearance.colours.m3onSurface + color: Colours.palette.m3onSurface font.family: Appearance.font.family.sans font.pointSize: Appearance.font.size.smaller diff --git a/widgets/StyledTextField.qml b/widgets/StyledTextField.qml index cb1ce83..1209ec1 100644 --- a/widgets/StyledTextField.qml +++ b/widgets/StyledTextField.qml @@ -1,5 +1,6 @@ pragma ComponentBehavior: Bound +import "root:/services" import "root:/config" import QtQuick import QtQuick.Controls @@ -7,8 +8,8 @@ import QtQuick.Controls TextField { id: root - color: Appearance.colours.m3onSurface - placeholderTextColor: Appearance.colours.m3outline + color: Colours.palette.m3onSurface + placeholderTextColor: Colours.palette.m3outline font.family: Appearance.font.family.sans font.pointSize: Appearance.font.size.smaller @@ -18,7 +19,7 @@ TextField { property bool disableBlink implicitWidth: 2 - color: Appearance.colours.m3primary + color: Colours.palette.m3primary radius: Appearance.rounding.normal onXChanged: { opacity = 1; diff --git a/widgets/VerticalSlider.qml b/widgets/VerticalSlider.qml index 1dbe3f2..f944da8 100644 --- a/widgets/VerticalSlider.qml +++ b/widgets/VerticalSlider.qml @@ -1,4 +1,5 @@ import "root:/widgets" +import "root:/services" import "root:/config" import QtQuick import QtQuick.Controls @@ -12,7 +13,7 @@ Slider { orientation: Qt.Vertical background: StyledRect { - color: Appearance.alpha(Appearance.colours.m3surfaceContainer, true) + color: Colours.alpha(Colours.palette.m3surfaceContainer, true) radius: Appearance.rounding.full StyledRect { @@ -22,7 +23,7 @@ Slider { y: root.handle.y implicitHeight: parent.height - y - color: Appearance.alpha(Appearance.colours.m3secondary, true) + color: Colours.alpha(Colours.palette.m3secondary, true) radius: Appearance.rounding.full } } @@ -39,7 +40,7 @@ Slider { RectangularShadow { anchors.fill: parent radius: rect.radius - color: Appearance.colours.m3shadow + color: Colours.palette.m3shadow blur: 5 spread: 0 } @@ -49,7 +50,7 @@ Slider { anchors.fill: parent - color: Appearance.alpha(Appearance.colours.m3inverseSurface, true) + color: Colours.alpha(Colours.palette.m3inverseSurface, true) radius: Appearance.rounding.full MaterialIcon { @@ -57,7 +58,7 @@ Slider { animate: true text: root.icon - color: Appearance.colours.m3inverseOnSurface + color: Colours.palette.m3inverseOnSurface anchors.centerIn: parent states: State { -- cgit v1.2.3-freya