Jack.Le
fbb04eb2f7
- Changed application entry point to use QApplication for better compatibility with widgets. - Set up QML UI style to support custom button backgrounds. - Introduced LocalSettingsModel and FileBrowser for managing application settings and file selection. - Updated QML components to reflect new data models and improve layout consistency. - Enhanced Theme.qml with detailed comments and improved color management for better readability.
128 lines
7.1 KiB
QML
128 lines
7.1 KiB
QML
pragma Singleton
|
|
|
|
import QtQuick
|
|
|
|
// =============================================================================
|
|
// Theme — single source of truth for colors and sizing
|
|
// =============================================================================
|
|
// Sections:
|
|
// 1. Mode flag
|
|
// 2. Tone palette (raw tones; everything else derives from these)
|
|
// 3. Surfaces (page / card / panel / workspace backgrounds)
|
|
// 4. Borders
|
|
// 5. Text (headings, body, panel titles)
|
|
// 6. Controls (fields, buttons, checkbox)
|
|
// 7. Tracks (pill toggle + scrollbar)
|
|
// 8. Tabs (footer tab bar)
|
|
// 9. Side rail
|
|
// 10. Status (success / warning / error)
|
|
// 11. Geometry (radius / border width / spacing / sizing)
|
|
// =============================================================================
|
|
|
|
QtObject {
|
|
// ── 1. Mode ──────────────────────────────────────────────────────────────
|
|
property bool isDarkMode: false
|
|
|
|
// ── 2. Tone palette (base values; consume via semantic tokens below) ─────
|
|
readonly property color tone100: isDarkMode ? "#111111" : "#FAFAFA"
|
|
readonly property color tone200: isDarkMode ? "#1A1A1A" : "#F2F2F2"
|
|
readonly property color tone300: isDarkMode ? "#242424" : "#E8E8E8"
|
|
readonly property color toneText: isDarkMode ? "#F2F2F2" : "#111111"
|
|
readonly property color toneMute: isDarkMode ? "#A8A8A8" : "#8A8A8A"
|
|
readonly property color toneBorder: isDarkMode ? "#2B2B2B" : "#D8D8D8"
|
|
|
|
// ── 3. Surfaces ──────────────────────────────────────────────────────────
|
|
readonly property color pageBackground: tone100
|
|
readonly property color cardBackground: tone200
|
|
readonly property color panelBackground: tone200
|
|
readonly property color workspaceBackground: tone200
|
|
readonly property color responseBackground: tone200
|
|
readonly property color subtleSectionBackground: tone300
|
|
|
|
// ── 4. Borders ───────────────────────────────────────────────────────────
|
|
readonly property color cardBorder: toneBorder
|
|
readonly property color responseBorder: toneBorder
|
|
readonly property color workspaceBorder: toneBorder
|
|
readonly property color innerFrameBorder: toneBorder
|
|
readonly property color outerFrameBorder: isDarkMode ? "#343434" : "#CECECE"
|
|
readonly property color softBorder: isDarkMode ? "#222222" : "#E2E2E2"
|
|
|
|
// ── 5. Text ──────────────────────────────────────────────────────────────
|
|
readonly property color headingColor: toneText
|
|
readonly property color bodyColor: toneMute
|
|
readonly property color panelTitleText: toneMute
|
|
|
|
// ── 6. Controls ──────────────────────────────────────────────────────────
|
|
// Fields
|
|
readonly property color fieldBackground: tone100
|
|
readonly property color fieldText: toneText
|
|
readonly property color fieldPlaceholder: toneMute
|
|
readonly property color fieldBorder: toneBorder
|
|
readonly property color fieldBorderFocus: toneText
|
|
// Neutral buttons
|
|
readonly property color buttonNeutralBackground: tone300
|
|
readonly property color buttonNeutralHover: isDarkMode ? "#303030" : "#DDDDDD"
|
|
readonly property color buttonNeutralPressed: tone100
|
|
readonly property color buttonNeutralText: toneText
|
|
readonly property color buttonPressed: tone300
|
|
readonly property color primaryAccent: toneText
|
|
// Checkbox
|
|
readonly property color checkboxText: toneText
|
|
|
|
// ── 7. Tracks (pill toggle, scrollbar thumb) ─────────────────────────────
|
|
readonly property color trackBackground: isDarkMode ? "#25252B" : "#D1D5DB"
|
|
|
|
// ── 8. Tabs (footer tab bar) ─────────────────────────────────────────────
|
|
readonly property color tabBarBackground: tone200
|
|
readonly property color tabBackground: "transparent"
|
|
readonly property color tabActiveBackground: "transparent"
|
|
readonly property color tabHoverBackground: tone300
|
|
readonly property color tabBorder: "transparent"
|
|
readonly property color tabText: toneMute
|
|
readonly property color tabActiveText: toneText
|
|
|
|
// ── 9. Side rail ─────────────────────────────────────────────────────────
|
|
readonly property color sideRailBackground: tone200
|
|
readonly property color sideActiveBackground: tone300
|
|
|
|
// ── 10. Status ───────────────────────────────────────────────────────────
|
|
readonly property color statusSuccessColor: isDarkMode ? "#63D471" : "#2E9E44"
|
|
readonly property color statusWarningColor: isDarkMode ? "#F5C15C" : "#C88A18"
|
|
readonly property color statusErrorColor: isDarkMode ? "#FF6B6B" : "#D64545"
|
|
|
|
// ── 11. Geometry ─────────────────────────────────────────────────────────
|
|
// Radius
|
|
readonly property int radiusXs: 4 // fields, tight elements
|
|
readonly property int radiusSm: 6 // buttons
|
|
readonly property int radiusMd: 10 // cards, group boxes
|
|
readonly property int radiusLg: 14 // large panels / dialogs
|
|
// Border width
|
|
readonly property int borderThin: 1
|
|
readonly property int borderStrong: 2
|
|
// Main panel layout
|
|
readonly property int mainAreaPadding: 10
|
|
readonly property int rightPaneGap: 6
|
|
readonly property int panelPadding: 12
|
|
// Side rail layout
|
|
readonly property int sideRailWidth: 190
|
|
readonly property int sideRailSpacing: 14
|
|
readonly property int sideButtonHeight: 146
|
|
readonly property int sideButtonMinHeight: 88
|
|
// Tab bar layout
|
|
readonly property int tabBarHeight: 34
|
|
readonly property int tabBarPadding: 6
|
|
readonly property int tabSpacing: 2
|
|
readonly property int tabRadius: 2
|
|
readonly property int tabFontSize: 12
|
|
readonly property int tabButtonMinWidth: 80
|
|
// Settings page layout
|
|
readonly property int settingsPanelMaxWidth: 760
|
|
readonly property int settingsOuterMargin: 40
|
|
readonly property int settingsSectionSpacing: 20
|
|
readonly property int settingsRowSpacing: 16
|
|
readonly property int settingsGridSpacing: 12
|
|
readonly property int settingsButtonHeight: 40
|
|
readonly property int settingsActionWidth: 200
|
|
readonly property int settingsFieldMinWidth: 160
|
|
}
|