mirror of
https://github.com/end-4/dots-hyprland.git
synced 2026-06-05 14:59:27 -05:00
end-4
267 lines
12 KiB
QML
267 lines
12 KiB
QML
pragma ComponentBehavior: Bound
|
|
pragma Singleton
|
|
|
|
import QtQuick
|
|
import Quickshell
|
|
import qs.modules.common
|
|
import qs.modules.common.functions
|
|
|
|
Singleton {
|
|
id: root
|
|
property QtObject darkColors
|
|
property QtObject lightColors
|
|
property QtObject colors
|
|
property QtObject radius
|
|
property QtObject font
|
|
property QtObject transition
|
|
property string iconsPath: `${Directories.assetsPath}/icons/fluent`
|
|
property bool dark: Appearance.m3colors.darkmode
|
|
|
|
readonly property bool transparencyEnabled: Config.options.appearance.transparency.enable
|
|
property real backgroundTransparency: transparencyEnabled ? 0.16 : 0
|
|
property real panelBackgroundTransparency: transparencyEnabled ? 0.14 : 0
|
|
property real panelLayerTransparency: root.dark ? 0.9 : 0.7
|
|
property real contentTransparency: root.dark ? 0.87 : 0.5
|
|
function applyBackgroundTransparency(col) {
|
|
return ColorUtils.applyAlpha(col, 1 - root.backgroundTransparency)
|
|
}
|
|
function applyContentTransparency(col) {
|
|
return ColorUtils.applyAlpha(col, 1 - root.contentTransparency)
|
|
}
|
|
lightColors: QtObject {
|
|
id: lightColors
|
|
property color bgPanelBody: "#F2F2F2"
|
|
property color bgPanelSeparator: "#E0E0E0"
|
|
property color bg0: "#EEEEEE"
|
|
property color bg0Border: '#BEBEBE'
|
|
property color bg1Base: "#F7F7F7"
|
|
property color bg1: "#F7F7F7"
|
|
property color bg1Hover: "#F7F7F7"
|
|
property color bg1Active: '#EFEFEF'
|
|
property color bg1Border: '#E9E9E9'
|
|
property color bg2: "#FBFBFB"
|
|
property color bg2Base: "#FBFBFB"
|
|
property color bg2Hover: '#ffffff'
|
|
property color bg2Active: '#eeeeee'
|
|
property color bg2Border: '#E0E0E0'
|
|
property color subfg: "#5C5C5C"
|
|
property color fg: "#000000"
|
|
property color fg1: "#626262"
|
|
property color inactiveIcon: "#C4C4C4"
|
|
property color controlBgInactive: '#555458'
|
|
property color controlBg: '#807F85'
|
|
property color controlBgHover: '#57575B'
|
|
property color controlFg: "#FFFFFF"
|
|
property color accentUnfocused: "#848484"
|
|
property color link: "#235CCF"
|
|
property color inputBg: ColorUtils.transparentize(bg0, 0.4)
|
|
}
|
|
darkColors: QtObject {
|
|
id: darkColors
|
|
property color bgPanelBody: '#242424'
|
|
property color bgPanelSeparator: "#191919"
|
|
property color bg0: "#1C1C1C"
|
|
property color bg0Border: "#404040"
|
|
property color bg1Base: '#2C2C2C'
|
|
property color bg1: '#2C2C2C'
|
|
property color bg1Hover: "#292929"
|
|
property color bg1Active: '#252525'
|
|
property color bg1Border: '#bebebe'
|
|
property color bg2Base: "#313131"
|
|
property color bg2: '#313131'
|
|
property color bg2Hover: '#363636'
|
|
property color bg2Active: '#2B2B2B'
|
|
property color bg2Border: '#404040'
|
|
property color subfg: "#CED1D7"
|
|
property color fg: "#FFFFFF"
|
|
property color fg1: "#D1D1D1"
|
|
property color inactiveIcon: "#494949"
|
|
property color controlBgInactive: "#CDCECF"
|
|
property color controlBg: "#9B9B9B"
|
|
property color controlBgHover: "#CFCED1"
|
|
property color controlFg: "#454545"
|
|
property color accentUnfocused: "#989898"
|
|
property color link: "#A7C9FC"
|
|
property color inputBg: ColorUtils.transparentize(darkColors.bg0, 0.5)
|
|
}
|
|
colors: QtObject {
|
|
id: colors
|
|
// Special
|
|
property color shadow: ColorUtils.transparentize('#161616', 0.62)
|
|
property color ambientShadow: ColorUtils.transparentize("#000000", 0.75)
|
|
property color bgPanelFooterBase: root.dark ? root.darkColors.bg0 : root.lightColors.bg0
|
|
property color bgPanelFooterBackground: ColorUtils.transparentize(root.dark ? root.darkColors.bg0 : root.lightColors.bg0, root.panelBackgroundTransparency)
|
|
property color bgPanelFooter: ColorUtils.transparentize(bgPanelFooterBackground, root.panelLayerTransparency)
|
|
property color bgPanelBodyBase: root.dark ? root.darkColors.bgPanelBody : root.lightColors.bgPanelBody
|
|
property color bgPanelBody: ColorUtils.solveOverlayColor(bgPanelFooterBackground,bgPanelBodyBase, 1 - root.panelLayerTransparency)
|
|
property color bgPanelSeparator: ColorUtils.solveOverlayColor(bgPanelBodyBase, root.dark ? root.darkColors.bgPanelSeparator : root.lightColors.bgPanelSeparator, 1 - root.panelBackgroundTransparency)
|
|
// Layer 0
|
|
property color bg0Base: root.dark ? root.darkColors.bg0 : root.lightColors.bg0
|
|
property color bg0: ColorUtils.transparentize(bg0Base, root.backgroundTransparency)
|
|
property color bg0Border: ColorUtils.transparentize(root.dark ? root.darkColors.bg0Border : root.lightColors.bg0Border, root.backgroundTransparency)
|
|
// Layer 1
|
|
property color bg1Base: root.dark ? root.darkColors.bg1 : root.lightColors.bg1
|
|
property color bg1: ColorUtils.solveOverlayColor(bg0Base, bg1Base, 1 - root.contentTransparency)
|
|
property color bg1Hover: ColorUtils.solveOverlayColor(bg0Base, root.dark ? root.darkColors.bg1Hover : root.lightColors.bg1Hover, 1 - root.contentTransparency)
|
|
property color bg1Active: ColorUtils.solveOverlayColor(bg0Base, root.dark ? root.darkColors.bg1Active : root.lightColors.bg1Active, 1 - root.contentTransparency)
|
|
property color bg1Border: ColorUtils.solveOverlayColor(bg0Base, root.dark ? root.darkColors.bg1Border : root.lightColors.bg1Border, 1 - root.contentTransparency)
|
|
// Layer 2
|
|
property color bg2Base: root.dark ? root.darkColors.bg2 : root.lightColors.bg2
|
|
property color bg2: ColorUtils.solveOverlayColor(bgPanelBodyBase, bg2Base, 1 - root.contentTransparency)
|
|
property color bg2Hover: ColorUtils.solveOverlayColor(bgPanelBodyBase, root.dark ? root.darkColors.bg2Hover : root.lightColors.bg2Hover, 1 - root.contentTransparency)
|
|
property color bg2Active: ColorUtils.solveOverlayColor(bgPanelBodyBase, root.dark ? root.darkColors.bg2Active : root.lightColors.bg2Active, 1 - root.contentTransparency)
|
|
property color bg2Border: ColorUtils.solveOverlayColor(bgPanelBodyBase, root.dark ? root.darkColors.bg2Border : root.lightColors.bg2Border, 1 - root.contentTransparency)
|
|
// Foreground / Text
|
|
property color subfg: root.dark ? root.darkColors.subfg : root.lightColors.subfg
|
|
property color fg: root.dark ? root.darkColors.fg : root.lightColors.fg
|
|
property color fg1: root.dark ? root.darkColors.fg1 : root.lightColors.fg1
|
|
property color inactiveIcon: root.dark ? root.darkColors.inactiveIcon : root.lightColors.inactiveIcon
|
|
property color link: root.dark ? root.darkColors.link : root.lightColors.link
|
|
// Controls
|
|
property color controlBgInactive: root.dark ? root.darkColors.controlBgInactive : root.lightColors.controlBgInactive
|
|
property color controlBg: root.dark ? root.darkColors.controlBg : root.lightColors.controlBg
|
|
property color controlBgHover: root.dark ? root.darkColors.controlBgHover : root.lightColors.controlBgHover
|
|
property color controlFg: root.dark ? root.darkColors.controlFg : root.lightColors.controlFg
|
|
property color inputBg: root.dark ? root.darkColors.inputBg : root.lightColors.inputBg
|
|
property color danger: "#C42B1C"
|
|
property color dangerActive: "#B62D1F"
|
|
property color warning: "#FF9900"
|
|
// Accent
|
|
property color accent: Appearance.colors.colPrimary
|
|
property color accentHover: Appearance.colors.colPrimaryHover
|
|
property color accentActive: Appearance.colors.colPrimaryActive
|
|
property color accentUnfocused: root.dark ? root.darkColors.accentUnfocused : root.lightColors.accentUnfocused
|
|
property color accentFg: ColorUtils.isDark(accent) ? "#FFFFFF" : "#000000"
|
|
property color selection: Appearance.colors.colPrimaryContainer
|
|
property color selectionFg: Appearance.colors.colOnPrimaryContainer
|
|
}
|
|
|
|
radius: QtObject {
|
|
id: radius
|
|
property int none: 0
|
|
property int small: 2
|
|
property int medium: 4
|
|
property int large: 8
|
|
property int xLarge: 12
|
|
}
|
|
|
|
font: QtObject {
|
|
id: font
|
|
property QtObject family: QtObject {
|
|
property string ui: "Noto Sans"
|
|
}
|
|
property QtObject weight: QtObject { // Noto is not Segoe, so we might use slightly different weights
|
|
property int thin: Font.Normal
|
|
property int regular: Font.Medium
|
|
property int strong: Font.DemiBold
|
|
property int stronger: (Font.DemiBold + 2*Font.Bold) / 3
|
|
property int strongest: Font.Bold
|
|
}
|
|
property QtObject pixelSize: QtObject {
|
|
property real normal: 11
|
|
property real large: 13
|
|
property real larger: 15
|
|
property real xlarger: 17
|
|
}
|
|
property QtObject variableAxes: QtObject {
|
|
property var ui: ({
|
|
"wdth": 25
|
|
})
|
|
}
|
|
}
|
|
|
|
transition: QtObject {
|
|
id: transition
|
|
|
|
property int velocity: 850
|
|
|
|
property QtObject easing: QtObject {
|
|
property QtObject bezierCurve: QtObject {
|
|
readonly property list<real> easeInOut: [0.42,0.00,0.58,1.00,1,1]
|
|
readonly property list<real> easeIn: [0,1,1,1,1,1]
|
|
readonly property list<real> easeOut: [1,0,1,1,1,1]
|
|
}
|
|
}
|
|
|
|
property Component color: Component {
|
|
ColorAnimation {
|
|
duration: 80
|
|
easing.type: Easing.BezierSpline
|
|
easing.bezierCurve: transition.easing.bezierCurve.easeIn
|
|
}
|
|
}
|
|
|
|
property Component opacity: Component {
|
|
NumberAnimation {
|
|
duration: 120
|
|
easing.type: Easing.BezierSpline
|
|
easing.bezierCurve: transition.easing.bezierCurve.easeIn
|
|
}
|
|
}
|
|
|
|
property Component resize: Component { // TODO: better curve needed
|
|
NumberAnimation {
|
|
duration: 200
|
|
easing.type: Easing.BezierSpline
|
|
easing.bezierCurve: transition.easing.bezierCurve.easeIn
|
|
}
|
|
}
|
|
|
|
property Component enter: Component {
|
|
NumberAnimation {
|
|
duration: 250
|
|
easing.type: Easing.BezierSpline
|
|
easing.bezierCurve: transition.easing.bezierCurve.easeIn
|
|
}
|
|
}
|
|
|
|
property Component exit: Component {
|
|
NumberAnimation {
|
|
duration: 250
|
|
easing.type: Easing.BezierSpline
|
|
easing.bezierCurve: transition.easing.bezierCurve.easeOut
|
|
}
|
|
}
|
|
|
|
property Component move: Component {
|
|
NumberAnimation {
|
|
duration: 170
|
|
easing.type: Easing.BezierSpline
|
|
easing.bezierCurve: transition.easing.bezierCurve.easeInOut
|
|
}
|
|
}
|
|
|
|
property Component rotate: Component {
|
|
NumberAnimation {
|
|
duration: 170
|
|
easing.type: Easing.BezierSpline
|
|
easing.bezierCurve: transition.easing.bezierCurve.easeInOut
|
|
}
|
|
}
|
|
|
|
property Component anchor: Component {
|
|
AnchorAnimation {
|
|
duration: 160
|
|
easing.type: Easing.BezierSpline
|
|
easing.bezierCurve: transition.easing.bezierCurve.easeIn
|
|
}
|
|
}
|
|
|
|
property Component longMovement: Component {
|
|
NumberAnimation {
|
|
duration: 1000
|
|
easing.type: Easing.BezierSpline
|
|
easing.bezierCurve: transition.easing.bezierCurve.easeIn
|
|
}
|
|
}
|
|
|
|
property Component scroll: Component {
|
|
NumberAnimation {
|
|
duration: 250
|
|
easing.type: Easing.BezierSpline
|
|
easing.bezierCurve: [0.0, 0.0, 0.25, 1.0, 1, 1]
|
|
}
|
|
}
|
|
}
|
|
}
|