// A living reference for Panama's shared visual language. This deliberately // renders the production widgets instead of lookalike mock components, so a // change to a control or Theme token is visible here immediately. import Quickshell import QtQuick import QtQuick.Layouts import qs.config import qs.widgets ShellRoot { FloatingWindow { id: galleryWindow title: "Panama Prism Gallery" visible: true implicitWidth: 1120 implicitHeight: 760 minimumSize: Qt.size(920, 640) color: Theme.bg Rectangle { anchors.fill: parent color: Theme.bg PrismEdge { anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right inset: 0 } RowLayout { anchors.fill: parent anchors.margins: 34 spacing: 34 // Quiet editorial rail: enough context to make screenshots // self-explanatory without competing with the components. ColumnLayout { Layout.preferredWidth: 222 Layout.fillHeight: true spacing: 0 Rectangle { Layout.preferredWidth: 38 Layout.preferredHeight: 38 radius: 12 color: Theme.alpha(Theme.fg, 0.07) ThemedIcon { anchors.centerIn: parent size: 20 icon: "applications-graphics-symbolic" tint: Theme.accent } } Text { Layout.topMargin: 20 text: "PRISM" color: Theme.fg font.family: Theme.fontFamily font.pixelSize: 26 font.weight: Font.DemiBold font.letterSpacing: 1.4 } Text { Layout.topMargin: 5 Layout.maximumWidth: 210 text: "Panama's living interface reference. Calm by default, vivid with purpose." color: Theme.fgDim wrapMode: Text.WordWrap lineHeight: 1.25 font.family: Theme.fontFamily font.pixelSize: Theme.fontSize } Item { Layout.preferredHeight: 36 } Repeater { model: [ { label: "Tokyo Night Moon", color: Theme.bgHighlight }, { label: "Signal blue", color: Theme.accent }, { label: "Prism orchid", color: Theme.accentSecondary } ] RowLayout { required property var modelData Layout.topMargin: 10 spacing: 10 Rectangle { Layout.preferredWidth: 12 Layout.preferredHeight: 12 radius: 6 color: modelData.color } Text { text: modelData.label color: Theme.fgDim font.family: Theme.fontFamily font.pixelSize: Theme.fontSizeSmall } } } Item { Layout.fillHeight: true } Text { text: "REAL COMPONENTS · LIVE TOKENS" color: Theme.fgMuted font.family: Theme.fontFamily font.pixelSize: 10 font.weight: Font.DemiBold font.letterSpacing: 1.1 } } Rectangle { Layout.fillWidth: true Layout.fillHeight: true radius: Theme.popoverRadius color: Theme.alpha(Theme.bgPopover, Theme.popoverAlpha) border.width: 1 border.color: Theme.alpha(Theme.fg, 0.08) PrismEdge { anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right inset: parent.radius } Flickable { anchors.fill: parent anchors.margins: 30 contentWidth: width contentHeight: content.implicitHeight clip: true boundsBehavior: Flickable.StopAtBounds ColumnLayout { id: content width: parent.width spacing: 28 RowLayout { Layout.fillWidth: true ColumnLayout { spacing: 4 Text { text: "Interface inventory" color: Theme.fg font.family: Theme.fontFamily font.pixelSize: Theme.fontSizeTitle font.weight: Font.DemiBold } Text { text: "Production controls in their canonical states" color: Theme.fgDim font.family: Theme.fontFamily font.pixelSize: Theme.fontSize } } Item { Layout.fillWidth: true } Pill { interactive: false horizontalPadding: 12 ThemedIcon { size: 14 icon: "emblem-ok-symbolic" tint: Theme.green } Text { text: "TOKYO NIGHT MOON" color: Theme.fgDim font.family: Theme.fontFamily font.pixelSize: 10 font.weight: Font.DemiBold font.letterSpacing: 0.8 } } } ColumnLayout { Layout.fillWidth: true spacing: 12 Text { text: "QUICK CONTROLS" color: Theme.fgMuted font.family: Theme.fontFamily font.pixelSize: 10 font.weight: Font.DemiBold font.letterSpacing: 1.1 } RowLayout { Layout.fillWidth: true spacing: 12 Toggle { id: wifiToggle Layout.fillWidth: true icon: "network-wireless-signal-excellent-symbolic" label: "Wi-Fi" sublabel: active ? "Connected" : "Off" active: true onToggled: active = !active } Toggle { id: bluetoothToggle Layout.fillWidth: true icon: "bluetooth-active-symbolic" label: "Bluetooth" sublabel: active ? "2 devices" : "Off" active: false onToggled: active = !active } Toggle { id: focusToggle Layout.fillWidth: true icon: "weather-clear-night-symbolic" label: "Focus" sublabel: active ? "Until 5:30" : "Available" active: false onToggled: active = !active } } } ColumnLayout { Layout.fillWidth: true spacing: 12 Text { text: "CONTINUOUS VALUES" color: Theme.fgMuted font.family: Theme.fontFamily font.pixelSize: 10 font.weight: Font.DemiBold font.letterSpacing: 1.1 } Rectangle { Layout.fillWidth: true Layout.preferredHeight: 126 radius: Theme.cardRadius color: Theme.alpha(Theme.fg, 0.045) ColumnLayout { anchors.fill: parent anchors.margins: 18 spacing: 12 RowLayout { Layout.fillWidth: true Text { text: "System audio" color: Theme.fg font.family: Theme.fontFamily font.pixelSize: Theme.fontSize font.weight: Font.Medium } Item { Layout.fillWidth: true } Text { text: Math.round(volumeSlider.value * 100) + "%" color: Theme.fgDim font.family: Theme.fontFamily font.features: Theme.tabularFigures font.pixelSize: Theme.fontSize } } ValueSlider { id: volumeSlider Layout.fillWidth: true value: 0.68 icon: "audio-volume-high-symbolic" onMoved: newValue => volumeSlider.value = newValue } } } } ColumnLayout { Layout.fillWidth: true spacing: 12 Text { text: "BAR MATERIAL" color: Theme.fgMuted font.family: Theme.fontFamily font.pixelSize: 10 font.weight: Font.DemiBold font.letterSpacing: 1.1 } Rectangle { Layout.fillWidth: true Layout.preferredHeight: 74 radius: Theme.cardRadius color: Theme.alpha(Theme.bg, 0.62) Row { anchors.centerIn: parent spacing: 8 Pill { ThemedIcon { size: 15 icon: "view-grid-symbolic" tint: Theme.accent } Text { text: "1 2 3" color: Theme.fg font.family: Theme.fontFamily font.pixelSize: Theme.fontSizeSmall } } Pill { ThemedIcon { size: 15 icon: "edit-copy-symbolic" tint: Theme.fgDim } Text { text: "Clipboard" color: Theme.fg font.family: Theme.fontFamily font.pixelSize: Theme.fontSizeSmall } } Pill { ThemedIcon { size: 15 icon: "appointment-soon-symbolic" tint: Theme.fgDim } Text { text: "Tue Aug 18 · 4:46 AM" color: Theme.fg font.family: Theme.fontFamily font.features: Theme.tabularFigures font.pixelSize: Theme.fontSizeSmall } } } } } } } } } } } }