From cd2bd3ffcfe45d70c79362119e79e97c0cd2f0d4 Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Thu, 19 Mar 2026 03:58:20 +0000 Subject: [PATCH] =?UTF-8?q?feat(qt6):=20Material=20Design=203=20frontpage?= =?UTF-8?q?=20=E2=80=94=20tonal=20surfaces,=20pill=20buttons,=20proper=20t?= =?UTF-8?q?ype=20scale?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Full MD3 pass on FrontPage and light theme: - Tonal surface containers (surfaceContainer, High, Highest) - Rounded pill buttons (radius 22) and cards (radius 12-16) - MD3 type scale with DemiBold/Bold weight hierarchy - Level badges with rounded-square containers instead of circles - Proper onSurface/onSurfaceVariant color roles - Light theme: cool blue-gray (#e8eaf2 bg, #f0f1f8 paper) - Blue gradient hero wash, tonal stats strip - Tag chips with tinted backgrounds matching level accent Co-Authored-By: Claude Opus 4.6 (1M context) --- frontends/qt6/FrontPage.qml | 543 +++++++++++++++---------------- qml/components/theming/Theme.qml | 2 +- 2 files changed, 262 insertions(+), 283 deletions(-) diff --git a/frontends/qt6/FrontPage.qml b/frontends/qt6/FrontPage.qml index bc4593870..a97abc449 100644 --- a/frontends/qt6/FrontPage.qml +++ b/frontends/qt6/FrontPage.qml @@ -8,7 +8,6 @@ Rectangle { id: root color: Theme.background - // ── DBAL connection ── DBALProvider { id: dbal } property bool dbalOnline: dbal.connected @@ -18,17 +17,13 @@ Rectangle { function loadPlatformStatus() { dbal.ping(function(success) { if (success) { - dbal.execute("core/version", {}, function(result, error) { - if (result && result.version) platformVersion = result.version - }) - dbal.execute("core/stats", {}, function(result, error) { - if (result) { - publicStats = { - users: result.totalUsers || publicStats.users, - packages: result.totalPackages || publicStats.packages, - workflows: result.totalWorkflows || publicStats.workflows, - backends: result.totalBackends || publicStats.backends - } + dbal.execute("core/version", {}, function(r, e) { if (r && r.version) platformVersion = r.version }) + dbal.execute("core/stats", {}, function(r, e) { + if (r) publicStats = { + users: r.totalUsers || publicStats.users, + packages: r.totalPackages || publicStats.packages, + workflows: r.totalWorkflows || publicStats.workflows, + backends: r.totalBackends || publicStats.backends } }) } @@ -37,50 +32,31 @@ Rectangle { Component.onCompleted: loadPlatformStatus() - // ── Palette — cool/techy, theme-aware ── - readonly property color accentBlue: "#6366F1" // indigo-500 - readonly property color accentCyan: "#06B6D4" // cyan-500 - readonly property color accentViolet: "#8B5CF6" // violet-500 - readonly property color accentAmber: "#F59E0B" // amber-500 - readonly property color accentRose: "#F43F5E" // rose-500 - // Theme-aware surface colors (work in both light and dark) + // ── MD3-inspired palette ── readonly property bool isDark: Theme.mode === "dark" - readonly property color subtleText: isDark ? Qt.rgba(1, 1, 1, 0.45) : Qt.rgba(0, 0, 0, 0.45) - readonly property color subtleBorder: isDark ? Qt.rgba(1, 1, 1, 0.08) : Qt.rgba(0, 0, 0, 0.08) - readonly property color cardBg: isDark ? Qt.rgba(1, 1, 1, 0.03) : Qt.rgba(0, 0, 0, 0.02) + readonly property color accentBlue: "#6366F1" + readonly property color accentCyan: "#06B6D4" + readonly property color accentViolet: "#8B5CF6" + readonly property color accentAmber: "#F59E0B" + readonly property color accentRose: "#F43F5E" - // ── Level definitions ── + // MD3 tonal surfaces + readonly property color surfaceContainer: isDark ? Qt.rgba(1, 1, 1, 0.05) : Qt.rgba(0.31, 0.31, 0.44, 0.06) + readonly property color surfaceContainerHigh: isDark ? Qt.rgba(1, 1, 1, 0.08) : Qt.rgba(0.31, 0.31, 0.44, 0.10) + readonly property color surfaceContainerHighest: isDark ? Qt.rgba(1, 1, 1, 0.12) : Qt.rgba(0.31, 0.31, 0.44, 0.14) + readonly property color onSurface: Theme.text + readonly property color onSurfaceVariant: Theme.textSecondary + readonly property color outline: Theme.border + readonly property color outlineVariant: isDark ? Qt.rgba(1, 1, 1, 0.06) : Qt.rgba(0, 0, 0, 0.08) + readonly property color primaryContainer: isDark ? Qt.rgba(accentBlue.r, accentBlue.g, accentBlue.b, 0.15) : Qt.rgba(accentBlue.r, accentBlue.g, accentBlue.b, 0.12) + + // ── Data ── property var levels: [ - { - level: 1, name: "Public", accent: "#94A3B8", // slate-400 - icon: "\u2302", // house - desc: "Explore the platform. Browse the component library, storybook, and public API.", - tags: ["Landing", "Storybook", "Docs"] - }, - { - level: 2, name: "User", accent: "#6366F1", // indigo - icon: "\u2605", // star - desc: "Your space. Dashboard, profile, forum, gallery, and all installed packages.", - tags: ["Dashboard", "Profile", "Forum", "Gallery"] - }, - { - level: 3, name: "Admin", accent: "#06B6D4", // cyan - icon: "\u2699", // gear - desc: "Moderate and manage. User tables, audit logs, content moderation tools.", - tags: ["Users", "Audit", "Moderation"] - }, - { - level: 4, name: "God", accent: "#8B5CF6", // violet - icon: "\u26A1", // lightning - desc: "The builder tier. Visual workflow canvas, schema browser, page builder, 14 power tools.", - tags: ["Workflows", "Schemas", "Pages", "14 tools"] - }, - { - level: 5, name: "Super God", accent: "#F43F5E", // rose - icon: "\u2B50", // star - desc: "Platform control. Multi-tenant management, system config, god-level promotions.", - tags: ["Tenants", "Config", "Promote"] - } + { level: 1, name: "Public", accent: "#94A3B8", desc: "Explore the platform. Component library, storybook, and public API.", tags: ["Landing", "Storybook", "Docs"] }, + { level: 2, name: "User", accent: accentBlue, desc: "Your space. Dashboard, profile, forum, gallery, and packages.", tags: ["Dashboard", "Profile", "Forum", "Gallery"] }, + { level: 3, name: "Admin", accent: accentCyan, desc: "Moderate and manage. User tables, audit logs, content tools.", tags: ["Users", "Audit", "Moderation"] }, + { level: 4, name: "God", accent: accentViolet, desc: "The builder tier. Visual workflows, schema browser, 14 power tools.", tags: ["Workflows", "Schemas", "Pages", "14 tools"] }, + { level: 5, name: "Super God", accent: accentRose, desc: "Platform control. Multi-tenant management, system config.", tags: ["Tenants", "Config", "Promote"] } ] property var techStack: [ @@ -109,126 +85,154 @@ Rectangle { width: parent.width spacing: 0 - // ═══════════════════════════════════════════════════════════ + // ════════════════════════════════════════════════════════ // HERO - // ═══════════════════════════════════════════════════════════ + // ════════════════════════════════════════════════════════ Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 360 + Layout.preferredHeight: 380 color: "transparent" - // Subtle gradient — stronger in light mode for warmth + // Blue gradient wash Rectangle { anchors.fill: parent gradient: Gradient { - orientation: Gradient.Horizontal - GradientStop { position: 0.0; color: isDark ? Qt.rgba(0.39, 0.4, 0.95, 0.06) : Qt.rgba(0.30, 0.45, 0.90, 0.15) } - GradientStop { position: 0.5; color: isDark ? "transparent" : Qt.rgba(0.35, 0.55, 0.95, 0.06) } - GradientStop { position: 1.0; color: isDark ? Qt.rgba(0.55, 0.36, 0.96, 0.04) : Qt.rgba(0.50, 0.40, 0.92, 0.12) } - } - } - // Vertical blue wash in light mode - Rectangle { - anchors.fill: parent - visible: !isDark - gradient: Gradient { - GradientStop { position: 0.0; color: Qt.rgba(0.35, 0.50, 0.95, 0.10) } - GradientStop { position: 0.6; color: Qt.rgba(0.40, 0.55, 0.90, 0.04) } + GradientStop { position: 0.0; color: isDark ? Qt.rgba(0.39, 0.4, 0.95, 0.06) : Qt.rgba(0.30, 0.40, 0.90, 0.12) } + GradientStop { position: 0.7; color: isDark ? "transparent" : Qt.rgba(0.35, 0.45, 0.88, 0.04) } GradientStop { position: 1.0; color: "transparent" } } } - // Top-down fade line - Rectangle { - anchors.bottom: parent.bottom - anchors.left: parent.left - anchors.right: parent.right - height: 1 - color: subtleBorder - } - ColumnLayout { anchors.centerIn: parent width: Math.min(parent.width - 80, 720) spacing: 16 - // Version pill + // Version pill — MD3 small chip Rectangle { Layout.alignment: Qt.AlignHCenter - width: versionLabel.implicitWidth + 20 - height: 24 - radius: 12 - color: Qt.rgba(0.39, 0.4, 0.95, 0.12) - border.color: Qt.rgba(0.39, 0.4, 0.95, 0.25) - border.width: 1 + width: vLabel.implicitWidth + 24 + height: 28 + radius: 14 + color: primaryContainer CText { - id: versionLabel + id: vLabel anchors.centerIn: parent text: "v" + platformVersion - variant: "caption" - color: accentBlue font.family: "monospace" + font.pixelSize: 12 + color: accentBlue } } CText { - variant: "h1" text: "MetaBuilder" - Layout.alignment: Qt.AlignHCenter - font.pixelSize: 48 + font.pixelSize: 52 font.weight: Font.Black - font.letterSpacing: -1.5 + font.letterSpacing: -2 + color: onSurface + Layout.alignment: Qt.AlignHCenter } CText { - variant: "body1" text: "The universal platform for building data-driven applications." + font.pixelSize: 17 + color: onSurfaceVariant Layout.alignment: Qt.AlignHCenter - opacity: isDark ? 0.5 : 0.7 - font.pixelSize: 16 } CText { - variant: "body2" - text: "95% JSON config \u00B7 5% infrastructure \u00B7 Desktop + Web + CLI" - Layout.alignment: Qt.AlignHCenter - opacity: isDark ? 0.3 : 0.5 - font.family: "monospace" + text: "95% JSON config \u00B7 5% infrastructure \u00B7 Desktop + Web + CLI" font.pixelSize: 13 + font.family: "monospace" + color: onSurfaceVariant + opacity: isDark ? 0.4 : 0.55 + Layout.alignment: Qt.AlignHCenter } RowLayout { Layout.alignment: Qt.AlignHCenter - Layout.topMargin: 16 - spacing: 10 + Layout.topMargin: 20 + spacing: 12 - CButton { - text: "Get Started" - variant: "primary" - onClicked: appWindow.currentView = "login" + // MD3 filled button + Rectangle { + width: getStartedText.implicitWidth + 40 + height: 44 + radius: 22 + color: accentBlue + + CText { + id: getStartedText + anchors.centerIn: parent + text: "Get Started" + font.pixelSize: 14 + font.weight: Font.DemiBold + color: "#ffffff" + } + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: appWindow.currentView = "login" + } } - CButton { - text: "Storybook" - variant: "ghost" - onClicked: appWindow.currentView = "storybook" + + // MD3 outlined button + Rectangle { + width: sbText.implicitWidth + 32 + height: 44 + radius: 22 + color: "transparent" + border.color: outline + border.width: 1 + + CText { + id: sbText + anchors.centerIn: parent + text: "Storybook" + font.pixelSize: 14 + color: accentBlue + } + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: appWindow.currentView = "storybook" + } } - CButton { - text: "Packages" - variant: "ghost" - onClicked: appWindow.currentView = "marketplace" + + Rectangle { + width: pkgText.implicitWidth + 32 + height: 44 + radius: 22 + color: "transparent" + border.color: outline + border.width: 1 + + CText { + id: pkgText + anchors.centerIn: parent + text: "Packages" + font.pixelSize: 14 + color: accentBlue + } + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: appWindow.currentView = "marketplace" + } } } } } - // ═══════════════════════════════════════════════════════════ - // STATS STRIP - // ═══════════════════════════════════════════════════════════ + // ════════════════════════════════════════════════════════ + // STATS + // ════════════════════════════════════════════════════════ Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 80 - color: isDark ? cardBg : Qt.rgba(0.35, 0.50, 0.90, 0.07) + Layout.preferredHeight: 88 + color: surfaceContainer RowLayout { anchors.fill: parent @@ -249,22 +253,21 @@ Rectangle { RowLayout { anchors.centerIn: parent - spacing: 8 + spacing: 10 CText { text: modelData.value - font.pixelSize: 22 + font.pixelSize: 24 font.weight: Font.Bold font.family: "monospace" color: accentBlue } CText { text: modelData.label - variant: "caption" - font.family: "monospace" font.pixelSize: 10 - font.letterSpacing: 1.5 - opacity: isDark ? 0.3 : 0.55 + font.family: "monospace" + font.letterSpacing: 2 + color: onSurfaceVariant } } @@ -273,17 +276,17 @@ Rectangle { anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter width: 1 - height: 28 - color: subtleBorder + height: 32 + color: outlineVariant } } } } } - // ═══════════════════════════════════════════════════════════ + // ════════════════════════════════════════════════════════ // ACCESS LEVELS - // ═══════════════════════════════════════════════════════════ + // ════════════════════════════════════════════════════════ ColumnLayout { Layout.fillWidth: true Layout.topMargin: 48 @@ -291,24 +294,14 @@ Rectangle { Layout.rightMargin: 40 spacing: 24 - RowLayout { + CText { + text: "Access Levels" + font.pixelSize: 22 + font.weight: Font.Bold + color: onSurface Layout.alignment: Qt.AlignHCenter - spacing: 8 - CText { - variant: "h3" - text: "Access Levels" - font.weight: Font.Bold - } - Rectangle { - width: 40 - height: 2 - radius: 1 - color: accentBlue - Layout.alignment: Qt.AlignVCenter - } } - // Level cards — horizontal strip RowLayout { Layout.fillWidth: true spacing: 12 @@ -317,12 +310,13 @@ Rectangle { model: levels delegate: Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 180 - radius: 8 - color: cardBg - border.color: lvlMA.containsMouse ? modelData.accent : subtleBorder + Layout.preferredHeight: 196 + radius: 16 + color: lvlMA.containsMouse ? surfaceContainerHighest : surfaceContainerHigh + border.color: lvlMA.containsMouse ? modelData.accent : outlineVariant border.width: 1 + Behavior on color { ColorAnimation { duration: 200 } } Behavior on border.color { ColorAnimation { duration: 200 } } MouseArea { @@ -341,32 +335,33 @@ Rectangle { ColumnLayout { anchors.fill: parent - anchors.margins: 14 - spacing: 6 + anchors.margins: 16 + spacing: 8 - // Header row: accent bar + level number + name RowLayout { - spacing: 8 + spacing: 10 + // MD3 small badge Rectangle { - width: 3 - height: 20 - radius: 1.5 - color: modelData.accent + width: 28 + height: 28 + radius: 8 + color: Qt.rgba(modelData.accent.r, modelData.accent.g, modelData.accent.b, isDark ? 0.2 : 0.15) + + CText { + anchors.centerIn: parent + text: modelData.level.toString() + font.pixelSize: 12 + font.weight: Font.Bold + color: modelData.accent + } } CText { - text: "L" + modelData.level - font.family: "monospace" - font.pixelSize: 11 - font.bold: true - color: modelData.accent - } - - CText { - variant: "subtitle1" text: modelData.name - font.bold: true + font.pixelSize: 16 + font.weight: Font.DemiBold + color: onSurface } Item { Layout.fillWidth: true } @@ -374,47 +369,45 @@ Rectangle { CText { visible: modelData.level > appWindow.currentLevel text: "\uD83D\uDD12" - font.pixelSize: 12 - opacity: isDark ? 0.3 : 0.5 + font.pixelSize: 14 + opacity: isDark ? 0.3 : 0.4 } } CText { - variant: "body2" text: modelData.desc + font.pixelSize: 13 wrapMode: Text.Wrap Layout.fillWidth: true - opacity: isDark ? 0.45 : 0.65 + color: onSurfaceVariant lineHeight: 1.4 - font.pixelSize: 12 } Item { Layout.fillHeight: true } - // Tags — subtle, monospace Flow { Layout.fillWidth: true - spacing: 4 + spacing: 6 Repeater { model: modelData.tags Rectangle { - width: tagText.implicitWidth + 12 - height: 20 - radius: 4 + width: tText.implicitWidth + 16 + height: 24 + radius: 8 color: Qt.rgba( - levels[index] ? parseInt(levels[index].accent.substr(1,2), 16) / 255 : 0.5, - levels[index] ? parseInt(levels[index].accent.substr(3,2), 16) / 255 : 0.5, - levels[index] ? parseInt(levels[index].accent.substr(5,2), 16) / 255 : 0.5, - 0.1) + levels[index].accent.r, + levels[index].accent.g, + levels[index].accent.b, + isDark ? 0.12 : 0.10) CText { - id: tagText + id: tText anchors.centerIn: parent text: modelData - font.pixelSize: 10 - font.family: "monospace" - opacity: 0.6 + font.pixelSize: 11 + font.weight: Font.Medium + color: levels[index].accent } } } @@ -425,9 +418,9 @@ Rectangle { } } - // ═══════════════════════════════════════════════════════════ + // ════════════════════════════════════════════════════════ // TECH STACK - // ═══════════════════════════════════════════════════════════ + // ════════════════════════════════════════════════════════ ColumnLayout { Layout.fillWidth: true Layout.topMargin: 48 @@ -435,21 +428,12 @@ Rectangle { Layout.rightMargin: 40 spacing: 24 - RowLayout { + CText { + text: "Stack" + font.pixelSize: 22 + font.weight: Font.Bold + color: onSurface Layout.alignment: Qt.AlignHCenter - spacing: 8 - CText { - variant: "h3" - text: "Stack" - font.weight: Font.Bold - } - Rectangle { - width: 28 - height: 2 - radius: 1 - color: accentViolet - Layout.alignment: Qt.AlignVCenter - } } GridLayout { @@ -462,10 +446,10 @@ Rectangle { model: techStack delegate: Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 68 - radius: 6 - color: cardBg - border.color: subtleBorder + Layout.preferredHeight: 72 + radius: 12 + color: surfaceContainerHigh + border.color: outlineVariant border.width: 1 RowLayout { @@ -474,26 +458,26 @@ Rectangle { spacing: 12 Rectangle { - width: 3 - height: 32 - radius: 1.5 + width: 4 + height: 36 + radius: 2 color: modelData.accent } ColumnLayout { Layout.fillWidth: true - spacing: 2 + spacing: 3 CText { text: modelData.name - font.bold: true - font.pixelSize: 13 + font.pixelSize: 14 + font.weight: Font.DemiBold + color: onSurface } CText { text: modelData.desc - variant: "caption" - font.pixelSize: 11 - opacity: isDark ? 0.4 : 0.6 + font.pixelSize: 12 + color: onSurfaceVariant } } } @@ -502,9 +486,9 @@ Rectangle { } } - // ═══════════════════════════════════════════════════════════ + // ════════════════════════════════════════════════════════ // STATUS - // ═══════════════════════════════════════════════════════════ + // ════════════════════════════════════════════════════════ ColumnLayout { Layout.fillWidth: true Layout.topMargin: 48 @@ -512,21 +496,12 @@ Rectangle { Layout.rightMargin: 40 spacing: 20 - RowLayout { + CText { + text: "Status" + font.pixelSize: 22 + font.weight: Font.Bold + color: onSurface Layout.alignment: Qt.AlignHCenter - spacing: 8 - CText { - variant: "h3" - text: "Status" - font.weight: Font.Bold - } - Rectangle { - width: 36 - height: 2 - radius: 1 - color: accentCyan - Layout.alignment: Qt.AlignVCenter - } } RowLayout { @@ -537,39 +512,39 @@ Rectangle { model: services delegate: Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 52 - radius: 6 - color: cardBg - border.color: subtleBorder + Layout.preferredHeight: 56 + radius: 12 + color: surfaceContainerHigh + border.color: outlineVariant border.width: 1 RowLayout { anchors.fill: parent - anchors.leftMargin: 12 - anchors.rightMargin: 12 - spacing: 8 + anchors.leftMargin: 14 + anchors.rightMargin: 14 + spacing: 10 Rectangle { - width: 7 - height: 7 - radius: 3.5 + width: 8 + height: 8 + radius: 4 color: modelData.status === "online" ? accentBlue : modelData.status === "standby" ? accentAmber : accentRose } CText { text: modelData.name - font.pixelSize: 12 + font.pixelSize: 13 + color: onSurface Layout.fillWidth: true } CText { text: modelData.status - font.pixelSize: 10 + font.pixelSize: 11 font.family: "monospace" color: modelData.status === "online" ? accentBlue : modelData.status === "standby" ? accentAmber : accentRose - opacity: 0.7 } } } @@ -577,9 +552,9 @@ Rectangle { } } - // ═══════════════════════════════════════════════════════════ + // ════════════════════════════════════════════════════════ // QUICK LOGIN - // ═══════════════════════════════════════════════════════════ + // ════════════════════════════════════════════════════════ ColumnLayout { Layout.fillWidth: true Layout.topMargin: 48 @@ -589,9 +564,10 @@ Rectangle { CText { text: "Quick Access" - variant: "h4" - Layout.alignment: Qt.AlignHCenter + font.pixelSize: 22 font.weight: Font.Bold + color: onSurface + Layout.alignment: Qt.AlignHCenter } RowLayout { @@ -607,17 +583,17 @@ Rectangle { ] delegate: Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 56 - radius: 6 - color: credMA2.containsMouse ? Qt.rgba(accentBlue.r, accentBlue.g, accentBlue.b, 0.06) : cardBg - border.color: credMA2.containsMouse ? modelData.accent : subtleBorder + Layout.preferredHeight: 60 + radius: 16 + color: cMA.containsMouse ? surfaceContainerHighest : surfaceContainerHigh + border.color: cMA.containsMouse ? modelData.accent : outlineVariant border.width: 1 - Behavior on border.color { ColorAnimation { duration: 150 } } Behavior on color { ColorAnimation { duration: 150 } } + Behavior on border.color { ColorAnimation { duration: 150 } } MouseArea { - id: credMA2 + id: cMA anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor @@ -626,15 +602,23 @@ Rectangle { RowLayout { anchors.fill: parent - anchors.leftMargin: 12 - anchors.rightMargin: 12 - spacing: 10 + anchors.leftMargin: 14 + anchors.rightMargin: 14 + spacing: 12 Rectangle { - width: 3 - height: 24 - radius: 1.5 - color: modelData.accent + width: 32 + height: 32 + radius: 10 + color: Qt.rgba(modelData.accent.r, modelData.accent.g, modelData.accent.b, isDark ? 0.2 : 0.15) + + CText { + anchors.centerIn: parent + text: modelData.level.toString() + font.pixelSize: 13 + font.weight: Font.Bold + color: modelData.accent + } } ColumnLayout { @@ -643,21 +627,23 @@ Rectangle { CText { text: modelData.label - font.bold: true - font.pixelSize: 13 + font.pixelSize: 14 + font.weight: Font.DemiBold + color: onSurface } CText { text: modelData.user + " / " + modelData.pass - font.pixelSize: 10 + font.pixelSize: 11 font.family: "monospace" - opacity: isDark ? 0.3 : 0.5 + color: onSurfaceVariant } } CText { text: "\u2192" - font.pixelSize: 16 - opacity: credMA2.containsMouse ? 0.8 : 0.2 + font.pixelSize: 18 + color: onSurfaceVariant + opacity: cMA.containsMouse ? 1.0 : 0.3 Behavior on opacity { NumberAnimation { duration: 150 } } } } @@ -666,23 +652,15 @@ Rectangle { } } - // ═══════════════════════════════════════════════════════════ + // ════════════════════════════════════════════════════════ // FOOTER - // ═══════════════════════════════════════════════════════════ + // ════════════════════════════════════════════════════════ Item { Layout.preferredHeight: 48 } Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 48 - color: "transparent" - - Rectangle { - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right - height: 1 - color: subtleBorder - } + Layout.preferredHeight: 52 + color: surfaceContainer RowLayout { anchors.fill: parent @@ -691,17 +669,18 @@ Rectangle { CText { text: "\u00a9 2026 MetaBuilder" - font.pixelSize: 11 - opacity: 0.25 + font.pixelSize: 12 + color: onSurfaceVariant } Item { Layout.fillWidth: true } CText { text: "Qt6 \u00B7 Next.js \u00B7 C++ \u00B7 JSON" - font.pixelSize: 11 + font.pixelSize: 12 font.family: "monospace" - opacity: 0.2 + color: onSurfaceVariant + opacity: isDark ? 0.4 : 0.5 } } } diff --git a/qml/components/theming/Theme.qml b/qml/components/theming/Theme.qml index a7e190536..09be005a8 100644 --- a/qml/components/theming/Theme.qml +++ b/qml/components/theming/Theme.qml @@ -32,7 +32,7 @@ QtObject { readonly property var themes: ({ system: { name: "System", mode: "dark", primary: "#6366f1", background: "#0d0d0d", paper: "#1a1a1a", surface: "#242424", text: "#ffffff", textSecondary: "#a0a0a0", border: "#333333", error: "#ef4444", warning: "#f59e0b", success: "#22c55e", info: "#3b82f6" }, dark: { name: "Dark", mode: "dark", primary: "#6366f1", background: "#0d0d0d", paper: "#1a1a1a", surface: "#242424", text: "#ffffff", textSecondary: "#a0a0a0", border: "#333333", error: "#ef4444", warning: "#f59e0b", success: "#22c55e", info: "#3b82f6" }, - light: { name: "Light", mode: "light", primary: "#4f46e5", background: "#d6d9e4", paper: "#c6c9d6", surface: "#bdbfc9", text: "#111118", textSecondary: "#333345", border: "#a4a8ba", error: "#d32f2f", warning: "#ed6c02", success: "#2e7d32", info: "#0288d1" }, + light: { name: "Light", mode: "light", primary: "#4f46e5", background: "#e8eaf2", paper: "#f0f1f8", surface: "#e0e2ec", text: "#1b1b22", textSecondary: "#44464f", border: "#c4c6d4", error: "#ba1a1a", warning: "#ed6c02", success: "#2e7d32", info: "#0061a4" }, midnight: { name: "Midnight", mode: "dark", primary: "#6366f1", background: "#0f172a", paper: "#1e293b", surface: "#334155", text: "#f1f5f9", textSecondary: "#94a3b8", border: "#334155", error: "#ef4444", warning: "#f59e0b", success: "#22c55e", info: "#3b82f6" }, forest: { name: "Forest", mode: "dark", primary: "#22c55e", background: "#0a1f0a", paper: "#14331a", surface: "#1a4d23", text: "#ecfdf5", textSecondary: "#a7f3d0", border: "#166534", error: "#ef4444", warning: "#f59e0b", success: "#22c55e", info: "#3b82f6" }, ocean: { name: "Ocean", mode: "dark", primary: "#0ea5e9", background: "#0c1929", paper: "#132f4c", surface: "#1e4976", text: "#e0f2fe", textSecondary: "#7dd3fc", border: "#0369a1", error: "#ef4444", warning: "#f59e0b", success: "#22c55e", info: "#0ea5e9" },