arthur/arthur-os
1
0
Fork 0
mirror of https://github.com/arthur-pbty/arthur-os.git synced 2026-08-07 12:40:55 +02:00
Code Issues Packages Projects Releases Wiki Activity

Bring on gradient borders

Browse Source
This commit is contained in:
Ryan Hughes
2026-06-02 11:17:13 -04:00
parent 30bafe7bb0
commit 98ba4a9697
48 changed files with 1323 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shell/plugins/bar/Bar.qml
+6 -9
View File
@@ -798,13 +798,12 @@ Item {
}
}
Rectangle {
BorderSurface {
id: tooltipBubble
implicitWidth: tooltipLabel.implicitWidth + 20
implicitHeight: tooltipLabel.implicitHeight + 14
color: Color.tooltip.background
border.color: Color.tooltip.border
border.width: 1
borderSpec: Border.surfaceSpec("tooltip", "border", Color.tooltip.border, 1)
radius: Style.cornerRadius
Text {
@@ -904,11 +903,10 @@ Item {
width: ghostWindow.ghostWidth + ghostWindow.ghostPadding * 2
height: ghostWindow.ghostHeight + ghostWindow.ghostPadding * 2
Rectangle {
BorderSurface {
anchors.fill: parent
color: root.transparent ? "transparent" : root.background
border.color: root.barForeground
border.width: 1
borderSpec: Border.flat(root.barForeground, 1)
radius: Math.min(Style.cornerRadius, height / 2)
opacity: root.transparent ? 0.45 : 0.94
}
@@ -1234,13 +1232,12 @@ Item {
HoverHandler { id: moduleHover }
Rectangle {
BorderSurface {
visible: slot.dragSource
anchors.fill: parent
anchors.margins: Style.space(1)
color: root.transparent ? "transparent" : root.background
border.color: root.barForeground
border.width: 1
borderSpec: Border.flat(root.barForeground, 1)
radius: Math.min(Style.cornerRadius, height / 2)
opacity: root.transparent ? 0.22 : 0.32
}
shell/plugins/clipboard/Clipboard.qml
+8 -6
View File
@@ -26,6 +26,7 @@ Item {
property color background: Color.menu.background
property color foreground: Color.menu.text
property color border: Color.menu.border
property var borderSpec: Border.surfaceSpec("menu", "border", border, Math.max(1, Style.space(2)))
property color scrim: Color.menu.scrim
property color selectedBackground: Color.menu.selectedBackground
property color selectedText: Color.menu.selectedText
@@ -275,15 +276,15 @@ Item {
onClicked: root.close()
}
Rectangle {
BorderSurface {
id: card
width: root.cardWidth
height: root.cardHeight
radius: root.cornerRadius
anchors.centerIn: parent
color: root.background
border.color: root.border
border.width: Math.max(1, Style.space(2))
borderSpec: root.borderSpec
padding: root.contentMargin
MouseArea { anchors.fill: parent; onClicked: {} }
@@ -357,7 +358,10 @@ Item {
Column {
anchors.fill: parent
anchors.margins: root.contentMargin
anchors.topMargin: card.contentTopInset
anchors.rightMargin: card.contentRightInset
anchors.bottomMargin: card.contentBottomInset
anchors.leftMargin: card.contentLeftInset
spacing: root.contentSpacing
Rectangle {
@@ -365,7 +369,6 @@ Item {
height: root.headerHeight
radius: root.cornerRadius
color: "transparent"
border.width: 0
Text {
anchors.left: parent.left
@@ -415,7 +418,6 @@ Item {
height: root.rowHeight
radius: root.cornerRadius
color: hasCursor ? root.selectedBackground : "transparent"
border.width: 0
Row {
anchors.fill: parent
shell/plugins/dev-gallery/GalleryPanel.qml
+30 -44
View File
@@ -376,13 +376,12 @@ Item {
font.bold: true
}
Rectangle {
BorderSurface {
width: parent.width
implicitHeight: conventionsCol.implicitHeight + Style.spacing.rowPaddingX * 2
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: 1
borderSpec: Border.flat(Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10), 1)
Column {
id: conventionsCol
@@ -458,13 +457,12 @@ Item {
wrapMode: Text.WordWrap
}
Rectangle {
BorderSurface {
width: parent.width
implicitHeight: typeCol.implicitHeight + Style.spacing.rowPaddingX * 2
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: 1
borderSpec: Border.flat(Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10), 1)
Column {
id: typeCol
@@ -676,13 +674,12 @@ Item {
font.pixelSize: Style.font.caption
}
Rectangle {
BorderSurface {
width: parent.width
implicitHeight: shCol.implicitHeight + Style.spacing.rowPaddingX * 2
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: 1
borderSpec: Border.flat(Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10), 1)
Column {
id: shCol
@@ -732,13 +729,12 @@ Item {
font.pixelSize: Style.font.caption
}
Rectangle {
BorderSurface {
width: parent.width
implicitHeight: sepCol.implicitHeight + Style.spacing.rowPaddingX * 2
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: 1
borderSpec: Border.flat(Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10), 1)
Column {
id: sepCol
@@ -777,13 +773,12 @@ Item {
wrapMode: Text.WordWrap
}
Rectangle {
BorderSurface {
width: parent.width
implicitHeight: csCol.implicitHeight + Style.spacing.rowPaddingX * 2
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: 1
borderSpec: Border.flat(Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10), 1)
Column {
id: csCol
@@ -862,13 +857,12 @@ Item {
wrapMode: Text.WordWrap
}
Rectangle {
BorderSurface {
width: parent.width
implicitHeight: buttonRow.implicitHeight + Style.spacing.rowPaddingX * 2
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: 1
borderSpec: Border.flat(Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10), 1)
Row {
id: buttonRow
@@ -1019,13 +1013,12 @@ Item {
wrapMode: Text.WordWrap
}
Rectangle {
BorderSurface {
width: parent.width
implicitHeight: choiceRow.implicitHeight + Style.spacing.rowPaddingX * 2
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: 1
borderSpec: Border.flat(Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10), 1)
ButtonGroup {
id: choiceRow
@@ -1070,13 +1063,12 @@ Item {
wrapMode: Text.WordWrap
}
Rectangle {
BorderSurface {
width: parent.width
implicitHeight: pabCol.implicitHeight + Style.spacing.rowPaddingX * 2
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: 1
borderSpec: Border.flat(Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10), 1)
Row {
id: pabCol
@@ -1162,7 +1154,7 @@ Item {
wrapMode: Text.WordWrap
}
Rectangle {
BorderSurface {
id: tipSwatch
width: Style.space(140)
height: Style.space(36)
@@ -1170,10 +1162,9 @@ Item {
color: tipMouse.containsMouse || focused
? Style.hoverFillFor(root.foreground, root.accent)
: Style.normalFillFor(root.foreground, root.accent)
border.color: focused
? Style.hoverBorderFor(root.foreground, root.accent)
: Style.normalBorderFor(root.foreground, root.accent)
border.width: focused ? Style.hoverBorderWidth : Style.normalBorderWidth
borderSpec: focused
? Border.controlSpec("hover-cursor", root.foreground, root.accent)
: Border.controlSpec("normal", root.foreground, root.accent)
radius: Style.cornerRadius
onFocusedChanged: if (focused) root.ensureCursorVisible(this)
@@ -1306,13 +1297,12 @@ Item {
wrapMode: Text.WordWrap
}
Rectangle {
BorderSurface {
width: parent.width
implicitHeight: tfCol.implicitHeight + Style.spacing.rowPaddingX * 2
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: 1
borderSpec: Border.flat(Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10), 1)
Column {
id: tfCol
@@ -1390,12 +1380,11 @@ Item {
wrapMode: Text.WordWrap
}
Rectangle {
BorderSurface {
width: parent.width
implicitHeight: numberDemo.implicitHeight + Style.spacing.rowPaddingX * 2
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.12)
border.width: 1
borderSpec: Border.flat(Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.12), 1)
radius: Style.cornerRadius
NumberField {
@@ -1502,13 +1491,12 @@ Item {
wrapMode: Text.WordWrap
}
Rectangle {
BorderSurface {
width: parent.width
implicitHeight: ddCol.implicitHeight + Style.spacing.rowPaddingX * 2
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: 1
borderSpec: Border.flat(Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10), 1)
Column {
id: ddCol
@@ -1558,13 +1546,12 @@ Item {
wrapMode: Text.WordWrap
}
Rectangle {
BorderSurface {
width: parent.width
implicitHeight: sddCol.implicitHeight + Style.spacing.rowPaddingX * 2
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: 1
borderSpec: Border.flat(Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10), 1)
Column {
id: sddCol
@@ -1630,13 +1617,12 @@ Item {
wrapMode: Text.WordWrap
}
Rectangle {
BorderSurface {
width: parent.width
implicitHeight: composedCol.implicitHeight + Style.spacing.rowPaddingX * 2
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: 1
borderSpec: Border.flat(Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10), 1)
Column {
id: composedCol
shell/plugins/emojis/Emojis.qml
+9 -6
View File
@@ -3,6 +3,7 @@ import Quickshell.Io
import Quickshell.Wayland
import QtQuick
import qs.Commons
import qs.Ui
import "EmojiSearch.js" as EmojiSearch
Item {
@@ -25,6 +26,7 @@ Item {
property color background: Color.menu.background
property color foreground: Color.menu.text
property color border: Color.menu.border
property var borderSpec: Border.surfaceSpec("menu", "border", border, Math.max(1, Style.space(2)))
property color scrim: Color.menu.scrim
property color selectedBackground: Color.menu.selectedBackground
property color selectedText: Color.menu.selectedText
@@ -175,15 +177,15 @@ Item {
onClicked: root.dismiss()
}
Rectangle {
BorderSurface {
id: card
width: root.cardWidth
height: root.cardHeight
radius: root.cornerRadius
anchors.centerIn: parent
color: root.background
border.color: root.border
border.width: Math.max(1, Style.space(2))
borderSpec: root.borderSpec
padding: root.contentMargin
MouseArea { anchors.fill: parent; onClicked: {} }
@@ -232,7 +234,10 @@ Item {
Column {
anchors.fill: parent
anchors.margins: root.contentMargin
anchors.topMargin: card.contentTopInset
anchors.rightMargin: card.contentRightInset
anchors.bottomMargin: card.contentBottomInset
anchors.leftMargin: card.contentLeftInset
spacing: root.contentSpacing
Rectangle {
@@ -240,7 +245,6 @@ Item {
height: root.headerHeight
radius: root.cornerRadius
color: "transparent"
border.width: 0
Text {
anchors.left: parent.left
@@ -278,7 +282,6 @@ Item {
height: root.cellHeight
radius: root.cornerRadius
color: hasCursor ? root.selectedBackground : "transparent"
border.width: 0
Text {
text: parent.emoji
shell/plugins/launcher/Launcher.qml
+14 -8
View File
@@ -37,9 +37,12 @@ Item {
property color background: Color.launcher.background
property color foreground: Color.launcher.text
property color border: Color.launcher.border
property var borderSpec: Border.surfaceSpec("launcher", "border", border, 2)
property color scrim: Color.launcher.scrim
property color selectedBackground: Color.launcher.selectedBackground
property color selectedText: Color.launcher.selectedText
property color selectedBorder: Color.launcher.selectedBorder
property var selectedBorderSpec: Border.surfaceSpec("launcher", "selected-border", selectedBorder, 0)
property string fontFamily: Style.font.menuFamily
property int cardWidth: 644
@@ -342,15 +345,15 @@ Item {
onClicked: root.dismiss()
}
Rectangle {
BorderSurface {
id: card
width: Math.min(root.cardWidth, panel.width - Style.gapsOut * 2)
height: Math.min(root.cardHeight, panel.height - Style.gapsOut * 2)
radius: Style.cornerRadius
anchors.centerIn: parent
color: root.background
border.color: root.border
border.width: 2
borderSpec: root.borderSpec
padding: root.contentMargin
clip: true
MouseArea { anchors.fill: parent; onClicked: {} }
@@ -435,7 +438,10 @@ Item {
Column {
anchors.fill: parent
anchors.margins: root.contentMargin
anchors.topMargin: card.contentTopInset
anchors.rightMargin: card.contentRightInset
anchors.bottomMargin: card.contentBottomInset
anchors.leftMargin: card.contentLeftInset
spacing: root.contentSpacing
Rectangle {
@@ -471,7 +477,7 @@ Item {
spacing: 0
boundsBehavior: Flickable.StopAtBounds
delegate: Rectangle {
delegate: BorderSurface {
id: row
required property int index
required property string name
@@ -484,12 +490,12 @@ Item {
height: root.rowHeight
radius: 0
color: row.hasCursor ? root.selectedBackground : "transparent"
border.width: 0
borderSpec: row.hasCursor ? root.selectedBorderSpec : Border.none()
Item {
id: iconSlot
anchors.left: parent.left
anchors.leftMargin: 14
anchors.leftMargin: row.borderLeft + 14
anchors.verticalCenter: parent.verticalCenter
width: root.iconSlotWidth
height: parent.height
@@ -519,7 +525,7 @@ Item {
anchors.left: iconSlot.right
anchors.leftMargin: 14
anchors.right: parent.right
anchors.rightMargin: 14
anchors.rightMargin: row.borderRight + 14
anchors.verticalCenter: parent.verticalCenter
text: row.name
color: row.hasCursor ? root.selectedText : root.foreground
shell/plugins/lock/LockView.qml
+10 -5
View File
@@ -1,6 +1,7 @@
import QtQuick
import QtQuick.Effects
import qs.Commons
import qs.Ui
Item {
id: root
@@ -26,6 +27,9 @@ Item {
readonly property int fieldFontSize: Style.font.heading
readonly property int passwordDotFontSize: Math.round(fieldFontSize * 1.3)
readonly property bool showPasswordCursor: inputEnabled && !authenticatingPassword && failureMessage.length === 0
readonly property string borderToken: failureMessage.length > 0 ? "border-error" : (authenticatingPassword ? "border-active" : "border")
readonly property color borderFallback: failureMessage.length > 0 ? Color.lock.borderError : (authenticatingPassword ? Color.lock.borderActive : Color.lock.border)
readonly property var inputBorderSpec: Border.surfaceSpec("lock", borderToken, borderFallback, root.outlineThickness, "border-alpha")
signal submitPassword(string password)
signal passwordTextEdited(string password)
@@ -97,22 +101,23 @@ Item {
onPositionChanged: root.wakeRequested()
}
Rectangle {
BorderSurface {
id: inputField
width: root.fieldWidth
height: root.fieldHeight
anchors.centerIn: parent
color: Color.lock.background
border.color: root.failureMessage.length > 0 ? Color.lock.borderError : (root.authenticatingPassword ? Color.lock.borderActive : Color.lock.border)
border.width: root.outlineThickness
borderSpec: root.inputBorderSpec
radius: Style.cornerRadius
clip: true
TextInput {
id: passwordInput
anchors.fill: parent
anchors.leftMargin: root.outlineThickness + 18
anchors.rightMargin: root.outlineThickness + 18
anchors.topMargin: inputField.borderTop
anchors.rightMargin: inputField.borderRight + 18
anchors.bottomMargin: inputField.borderBottom
anchors.leftMargin: inputField.borderLeft + 18
verticalAlignment: TextInput.AlignVCenter
horizontalAlignment: TextInput.AlignHCenter
activeFocusOnPress: true
shell/plugins/menu/Menu.qml
+17 -11
View File
@@ -3,6 +3,7 @@ import Quickshell.Io
import Quickshell.Wayland
import QtQuick
import qs.Commons
import qs.Ui
import "MenuModel.js" as MenuModel
Item {
@@ -77,9 +78,12 @@ Item {
property color background: Color.menu.background
property color foreground: Color.menu.text
property color border: Color.menu.border
property var borderSpec: Border.surfaceSpec("menu", "border", border, Math.max(1, Style.space(2)))
property color scrim: Color.menu.scrim
property color selectedBackground: Color.menu.selectedBackground
property color selectedText: Color.menu.selectedText
property color selectedBorder: Color.menu.selectedBorder
property var selectedBorderSpec: Border.surfaceSpec("menu", "selected-border", selectedBorder, 0)
readonly property int cornerRadius: Style.cornerRadius
property int contentMargin: Style.spacing.panelPadding
property int headerHeight: Math.max(Style.space(34), Style.font.title + Style.spacing.controlPaddingY * 2)
@@ -787,15 +791,15 @@ Item {
onClicked: root.cancel()
}
Rectangle {
BorderSurface {
id: card
width: root.cardWidth
height: root.cardHeight
radius: root.cornerRadius
anchors.centerIn: parent
color: root.background
border.color: root.border
border.width: Math.max(1, Style.space(2))
borderSpec: root.borderSpec
padding: root.contentMargin
MouseArea { anchors.fill: parent; onClicked: {} }
@@ -842,7 +846,10 @@ Item {
Column {
anchors.fill: parent
anchors.margins: root.contentMargin
anchors.topMargin: card.contentTopInset
anchors.rightMargin: card.contentRightInset
anchors.bottomMargin: card.contentBottomInset
anchors.leftMargin: card.contentLeftInset
spacing: root.contentSpacing
Rectangle {
@@ -850,7 +857,6 @@ Item {
height: root.headerHeight
radius: root.cornerRadius
color: "transparent"
border.width: 0
Text {
anchors.left: parent.left
@@ -898,7 +904,7 @@ Item {
}
}
delegate: Rectangle {
delegate: BorderSurface {
id: row
required property int index
required property string itemId
@@ -918,7 +924,7 @@ Item {
height: root.rowHeightForDetail(row.detail)
radius: root.cornerRadius
color: row.hasCursor ? root.selectedBackground : "transparent"
border.width: 0
borderSpec: row.hasCursor ? root.selectedBorderSpec : Border.none()
Rectangle {
visible: false
@@ -927,7 +933,7 @@ Item {
radius: Math.min(root.cornerRadius, Style.space(4))
color: root.selectedBackground
anchors.left: parent.left
anchors.leftMargin: Style.space(8)
anchors.leftMargin: row.borderLeft + Style.space(8)
anchors.verticalCenter: parent.verticalCenter
}
@@ -942,14 +948,14 @@ Item {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.left: parent.left
anchors.leftMargin: Style.space(8)
anchors.leftMargin: row.borderLeft + Style.space(8)
y: contentColumn.y + labelText.y + (labelText.height - height) / 2
}
Column {
id: contentColumn
anchors.left: row.hasIcon ? iconText.right : parent.left
anchors.leftMargin: row.hasIcon ? Style.space(6) : Style.space(18)
anchors.leftMargin: row.hasIcon ? Style.space(6) : row.borderLeft + Style.space(18)
anchors.right: trail.left
anchors.rightMargin: Style.space(6)
anchors.verticalCenter: parent.verticalCenter
@@ -982,7 +988,7 @@ Item {
id: trail
width: Style.space(14)
anchors.right: parent.right
anchors.rightMargin: Style.space(8)
anchors.rightMargin: row.borderRight + Style.space(8)
y: contentColumn.y + labelText.y + (labelText.height - height) / 2
spacing: 0
shell/plugins/model-usage/Widget.qml
+8 -5
View File
@@ -1055,7 +1055,7 @@ BarWidget {
}
}
component SectionCard: Rectangle {
component SectionCard: BorderSurface {
id: section
property string title: ""
property string subtitle: ""
@@ -1064,17 +1064,20 @@ BarWidget {
Layout.fillWidth: true
color: card
border.color: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.05)
border.width: 1
borderSpec: Border.flat(Qt.rgba(foreground.r, foreground.g, foreground.b, 0.05), 1)
padding: 12
radius: Style.cornerRadius
implicitHeight: body.implicitHeight + 22
implicitHeight: body.implicitHeight + contentTopInset + contentBottomInset
ColumnLayout {
id: body
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: 12
anchors.topMargin: section.contentTopInset
anchors.rightMargin: section.contentRightInset
anchors.bottomMargin: section.contentBottomInset
anchors.leftMargin: section.contentLeftInset
spacing: 8
PanelSectionHeader {
shell/plugins/notifications/BarWidget.qml
+8 -11
View File
@@ -130,14 +130,13 @@ BarWidget {
Item { Layout.fillWidth: true }
Rectangle {
BorderSurface {
id: dndPill
Layout.preferredHeight: Math.max(Style.space(24), Style.font.bodySmall + Style.spacing.controlPaddingY * 2)
Layout.preferredWidth: dndLabel.implicitWidth + dndGlyph.implicitWidth + Style.space(18)
radius: Math.min(Style.space(12), root.cardRadius + Style.space(6))
color: dndOn ? root.colAccent : root.colSurface
border.color: dndOn ? root.colAccent : root.colBorder
border.width: Style.normalBorderWidth
borderSpec: Border.flat(dndOn ? root.colAccent : root.colBorder, Style.normalBorderWidth)
readonly property bool dndOn: !!root.notificationService && root.notificationService.doNotDisturb
@@ -228,13 +227,12 @@ BarWidget {
Item { Layout.fillWidth: true }
Rectangle {
BorderSurface {
Layout.preferredWidth: actionLabel.implicitWidth + Style.space(16)
Layout.preferredHeight: Math.max(Style.space(22), Style.font.bodySmall + Style.spacing.controlPaddingY * 2)
radius: Math.min(Style.space(6), root.cardRadius)
color: actionArea.containsMouse ? root.colBorder : "transparent"
border.color: root.colBorder
border.width: Style.normalBorderWidth
borderSpec: Border.flat(root.colBorder, Style.normalBorderWidth)
Text {
id: actionLabel
@@ -272,7 +270,7 @@ BarWidget {
: (onPending ? root.notificationService.pendingModel : root.notificationService.pastModel)
visible: count > 0
delegate: Rectangle {
delegate: BorderSurface {
id: rowCard
required property int index
required property string app
@@ -293,8 +291,7 @@ BarWidget {
implicitHeight: rowContent.implicitHeight + Style.spacing.panelGap
radius: root.cardRadius
color: "transparent"
border.color: root.colBorder
border.width: Style.normalBorderWidth
borderSpec: Border.flat(root.colBorder, Style.normalBorderWidth)
MouseArea {
anchors.fill: parent
@@ -307,8 +304,8 @@ BarWidget {
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Style.space(12)
anchors.rightMargin: Style.space(12)
anchors.leftMargin: rowCard.borderLeft + Style.space(12)
anchors.rightMargin: rowCard.borderRight + Style.space(12)
spacing: Style.space(10)
Item {
shell/plugins/notifications/components/NotificationCard.qml
+9 -8
View File
@@ -6,9 +6,10 @@ import QtQuick
import QtQuick.Layouts
import Quickshell
import qs.Commons
import qs.Ui
import "../NotificationLogic.js" as NotificationLogic
Rectangle {
BorderSurface {
id: root
property string app: ""
@@ -48,6 +49,7 @@ Rectangle {
readonly property color dimColor: Qt.darker(Color.notifications.text, 1.4)
readonly property color bodyColor: Qt.darker(Color.notifications.text, 1.15)
readonly property color accentColor: urgency === 2 ? Color.urgent : (urgency === 0 ? dimColor : Color.notifications.countdown)
readonly property var cardBorderSpec: Border.surfaceSpec("notifications", "border", Color.notifications.border, Math.max(1, Style.space(2)))
function sanitizeBody(s) {
return NotificationLogic.sanitizeBody(s, app, appIcon)
@@ -62,13 +64,12 @@ Rectangle {
}
implicitWidth: Style.space(380)
// Add 2 * border.width so mainColumn (inset by border.width on top/left/right)
// Add vertical border insets so mainColumn (inset by border on top/left/right)
// doesn't push content under the bottom edge.
implicitHeight: mainColumn.implicitHeight + border.width * 2
implicitHeight: mainColumn.implicitHeight + borderTop + borderBottom
radius: cornerRadius
color: Color.notifications.background
border.color: Color.notifications.border
border.width: Math.max(1, Style.space(2))
borderSpec: cardBorderSpec
clip: true
HoverHandler { id: hoverTracker }
@@ -86,9 +87,9 @@ Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: root.border.width
anchors.leftMargin: root.border.width
anchors.rightMargin: root.border.width
anchors.topMargin: root.borderTop
anchors.leftMargin: root.borderLeft
anchors.rightMargin: root.borderRight
spacing: 0
// Text content.
shell/plugins/osd/Osd.qml
+7 -5
View File
@@ -3,6 +3,7 @@ import Quickshell
import Quickshell.Io
import Quickshell.Wayland
import qs.Commons
import qs.Ui
import "OsdModel.js" as OsdModel
Item {
@@ -79,7 +80,7 @@ Item {
// never blocks clicks to the desktop below it.
mask: Region {}
Rectangle {
BorderSurface {
id: card
width: root.mediaOsd ? root.mediaCardWidth : root.cardWidth
height: Math.max(Style.space(68), Style.font.displayLarge + Style.spacing.panelGap)
@@ -87,15 +88,16 @@ Item {
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.space(67)
color: Util.alpha(Color.background, 0.97)
border.color: Color.popups.border
border.width: Math.max(1, Style.space(2))
borderSpec: Border.surfaceSpec("popups", "border", Color.popups.border, Math.max(1, Style.space(2)))
radius: Style.cornerRadius
opacity: root.opened ? 1 : 0
Row {
anchors.fill: parent
anchors.leftMargin: Style.space(16)
anchors.rightMargin: Style.space(16)
anchors.topMargin: card.borderTop
anchors.rightMargin: card.borderRight + Style.space(16)
anchors.bottomMargin: card.borderBottom
anchors.leftMargin: card.borderLeft + Style.space(16)
spacing: Style.space(16)
Text {
width: Style.space(28)
shell/plugins/panels/network/Panel.qml
+6 -9
View File
@@ -741,15 +741,14 @@ Panel {
Item { width: Math.max(0, parent.width - parent.children[0].width - heroDetailPill.implicitWidth); height: 1 }
Rectangle {
BorderSurface {
id: heroDetailPill
visible: heroSsid.detail !== ""
implicitWidth: heroDetail.implicitWidth + Style.space(10)
implicitHeight: heroDetail.implicitHeight + Style.space(4)
anchors.verticalCenter: parent.verticalCenter
color: "transparent"
border.color: Style.normalBorderFor(root.bar.foreground)
border.width: Style.normalBorderWidth
borderSpec: Border.controlSpec("normal", root.bar.foreground, Color.accent)
radius: Style.cornerRadius
Text {
@@ -1139,12 +1138,11 @@ Panel {
font.pixelSize: Style.font.subtitle
}
Rectangle {
BorderSurface {
anchors.fill: parent
visible: row.forgetFocused
color: Style.hoverFillFor(root.bar.urgent, root.bar.urgent)
border.color: Style.hoverBorderFor(root.bar.urgent, root.bar.urgent)
border.width: Style.hoverBorderWidth
borderSpec: Border.controlSpec("hover-cursor", root.bar.urgent, root.bar.urgent)
radius: Style.cornerRadius
z: -1
}
@@ -1256,7 +1254,7 @@ Panel {
Component.onCompleted: if (visible) Qt.callLater(forceActiveFocus)
}
Rectangle {
BorderSurface {
id: statusMsgWrapper
visible: row.isBusy || row.isFailed
anchors.left: parent.left
@@ -1264,8 +1262,7 @@ Panel {
anchors.verticalCenter: parent.verticalCenter
height: Style.spacing.controlHeight
color: Style.normalFillFor(root.bar.foreground)
border.color: Style.normalBorderFor(root.bar.foreground)
border.width: Style.normalBorderWidth
borderSpec: Border.controlSpec("normal", root.bar.foreground, Color.accent)
radius: Style.cornerRadius
Text {
shell/plugins/panels/tailscale/Panel.qml
+2 -3
View File
@@ -1022,10 +1022,9 @@ Panel {
event.accepted = true
}
}
background: Rectangle {
background: BorderSurface {
color: Color.background
border.color: root.dim
border.width: 1
borderSpec: Border.flat(root.dim, 1)
radius: Style.cornerRadius
}
shell/plugins/panels/tailscale/TailscaleIcon.qml
+3 -3
View File
@@ -1,5 +1,6 @@
import QtQuick
import qs.Commons
import qs.Ui
Item {
id: root
@@ -42,7 +43,7 @@ Item {
rotation: -45
}
Rectangle {
BorderSurface {
visible: root.warning
width: Math.max(7, parent.width * 0.42)
height: width
@@ -50,8 +51,7 @@ Item {
color: root.badgeColor
anchors.right: parent.right
anchors.bottom: parent.bottom
border.color: Color.popups.background
border.width: 1
borderSpec: Border.flat(Color.popups.background, 1)
Text {
anchors.centerIn: parent
shell/plugins/polkit/PolkitAgent.qml
+9 -4
View File
@@ -4,6 +4,7 @@ import Quickshell.Io
import Quickshell.Services.Polkit
import Quickshell.Wayland
import qs.Commons
import qs.Ui
import "PolkitModel.js" as PolkitModel
Item {
@@ -16,6 +17,7 @@ Item {
property color foreground: Color.polkit.text
property color border: Color.polkit.border
property color borderError: Color.polkit.borderError
property var borderSpec: Border.surfaceSpec("polkit", errorFlash ? "border-error" : "border", errorFlash ? borderError : border, Math.max(1, Style.space(2)), "border-alpha")
property color scrim: Color.polkit.scrim
readonly property int cornerRadius: Style.cornerRadius
property int contentMargin: Style.spacing.panelPadding
@@ -212,7 +214,7 @@ Item {
onClicked: root.refocus()
}
Rectangle {
BorderSurface {
id: card
width: root.cardWidth
height: root.cardHeight
@@ -220,8 +222,8 @@ Item {
anchors.centerIn: parent
anchors.horizontalCenterOffset: root.shakeOffset
color: root.background
border.color: root.errorFlash ? root.borderError : root.border
border.width: Math.max(1, Style.space(2))
borderSpec: root.borderSpec
padding: root.contentMargin
MouseArea { anchors.fill: parent; onClicked: root.refocus() }
@@ -245,7 +247,10 @@ Item {
Row {
id: cardRow
anchors.fill: parent
anchors.margins: root.contentMargin
anchors.topMargin: card.contentTopInset
anchors.rightMargin: card.contentRightInset
anchors.bottomMargin: card.contentBottomInset
anchors.leftMargin: card.contentLeftInset
spacing: Style.space(14)
Text {
shell/plugins/reminders/ReminderFlow.qml
+9 -4
View File
@@ -2,6 +2,7 @@ import Quickshell
import Quickshell.Wayland
import QtQuick
import qs.Commons
import qs.Ui
import "ReminderFlowModel.js" as ReminderFlowModel
Item {
@@ -20,6 +21,7 @@ Item {
property color background: Color.menu.background
property color foreground: Color.menu.text
property color border: Color.menu.border
property var borderSpec: Border.surfaceSpec("menu", "border", border, Math.max(1, Style.space(2)))
property color scrim: Color.menu.scrim
readonly property int cornerRadius: Style.cornerRadius
property int contentMargin: Style.spacing.panelPadding
@@ -110,15 +112,15 @@ Item {
onClicked: root.dismiss()
}
Rectangle {
BorderSurface {
id: card
width: root.cardWidth
height: root.cardHeight
radius: root.cornerRadius
anchors.centerIn: parent
color: root.background
border.color: root.border
border.width: Math.max(1, Style.space(2))
borderSpec: root.borderSpec
padding: root.contentMargin
MouseArea { anchors.fill: parent; onClicked: {} }
@@ -148,7 +150,10 @@ Item {
Item {
anchors.fill: parent
anchors.margins: root.contentMargin
anchors.topMargin: card.contentTopInset
anchors.rightMargin: card.contentRightInset
anchors.bottomMargin: card.contentBottomInset
anchors.leftMargin: card.contentLeftInset
Text {
anchors.left: parent.left
shell/plugins/services/media/BarWidget.qml
+6 -8
View File
@@ -117,13 +117,12 @@ BarWidget {
spacing: Style.space(10)
width: parent.width
Rectangle {
BorderSurface {
width: Style.space(64)
height: Style.space(64)
radius: Style.spacing.labelGap
color: Style.normalFillFor(root.bar.foreground, Color.accent)
border.color: Style.normalBorderFor(root.bar.foreground, Color.accent)
border.width: Style.normalBorderWidth
borderSpec: Border.controlSpec("normal", root.bar.foreground, Color.accent)
Image {
anchors.fill: parent
@@ -230,7 +229,7 @@ BarWidget {
Repeater {
model: root.sourcePlayers
Rectangle {
BorderSurface {
id: sourceRow
required property var modelData
@@ -244,16 +243,15 @@ BarWidget {
height: sourceInner.implicitHeight + Style.space(10)
radius: Style.spacing.labelGap
color: selected ? Style.selectedFillFor(root.bar.foreground, Color.accent) : "transparent"
border.color: selected ? Style.selectedBorderFor(root.bar.foreground, Color.accent) : "transparent"
border.width: selected ? Style.normalBorderWidth : 0
borderSpec: selected ? Border.controlSpec("normal", root.bar.foreground, Color.accent) : Border.none()
Row {
id: sourceInner
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Style.space(8)
anchors.rightMargin: Style.space(8)
anchors.leftMargin: sourceRow.borderLeft + Style.space(8)
anchors.rightMargin: sourceRow.borderRight + Style.space(8)
spacing: Style.space(8)
Text {