nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor: move colours to separate service

Browse source
This commit is contained in:
2 * r + 2 * t 2025-05-05 14:50:18 +10:00
parent 9e717c5ce0
commit 1fdaf24526
29 changed files with 205 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
config/Appearance.qml
View file

@ -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<string> 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"
}
}

3
modules/background/Border.qml
View file

@ -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
}

27
modules/bar/Panel.qml
View file

@ -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)

2
modules/bar/Pills.qml
View file

@ -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]

2
modules/bar/components/ActiveWindow.qml
View file

@ -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

2
modules/bar/components/Clock.qml
View file

@ -6,7 +6,7 @@ import QtQuick
StyledRect {
id: root
property color colour: Appearance.colours.peach
property color colour: Colours.palette.peach
MaterialIcon {
id: icon

3
modules/bar/components/OsIcon.qml
View file

@ -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
}

3
modules/bar/components/Power.qml
View file

@ -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
}

2
modules/bar/components/StatusIcons.qml
View file

@ -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

3
modules/bar/components/Tray.qml
View file

@ -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

2
modules/bar/components/workspaces/ActiveIndicator.qml
View file

@ -33,7 +33,7 @@ Rectangle {
visible: false
anchors.fill: parent
color: Appearance.on(root.color)
color: Colours.on(root.color)
Behavior on color {
ColorAnimation {

3
modules/bar/components/workspaces/OccupiedBg.qml
View file

@ -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

4
modules/bar/components/workspaces/Workspace.qml
View file

@ -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
}
}
}

2
modules/bar/components/workspaces/Workspaces.qml
View file

@ -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<Workspace> workspaces: layout.children.filter(c => c.isWorkspace).sort((w1, w2) => w1.ws - w2.ws)
readonly property var occupied: Hyprland.workspaces.values.reduce((acc, curr) => {

4
modules/launcher/ActionItem.qml
View file

@ -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

3
modules/launcher/AppItem.qml
View file

@ -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

2
modules/launcher/AppList.qml
View file

@ -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

5
modules/launcher/Background.qml
View file

@ -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

5
modules/launcher/Content.qml
View file

@ -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
}

4
modules/launcher/ContentList.qml
View file

@ -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
}

2
modules/launcher/WallpaperItem.qml
View file

@ -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

5
modules/osd/Background.qml
View file

@ -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

138
services/Colours.qml Normal file
View file

@ -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<string> 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"
}
}

4
widgets/LayerShadow.qml
View file

@ -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
}

3
widgets/StateLayer.qml
View file

@ -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 {

5
widgets/StyledScrollBar.qml
View file

@ -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 {

3
widgets/StyledText.qml
View file

@ -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

7
widgets/StyledTextField.qml
View file

@ -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;

11
widgets/VerticalSlider.qml
View file

@ -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 {