pragma Singleton import QtQuick // ============================================================================= // Theme — single source of truth for colors and sizing // ============================================================================= // Sections: // 1. Mode flag // 2. Typography (families, pixel sizes, weights) // 3. Motion // 4. Tone palette (raw tones; everything else derives from these) // 5. Surfaces (page / card / panel / workspace backgrounds) // 6. Borders // 7. Text (headings, body, panel titles) // 8. Controls (fields, buttons, checkbox, toggle) // 9. Interaction overlays (hover / active washes — mode-aware) // 10. Tracks (pill toggle + scrollbar) // 11. Tabs (mode toggle pills) // 12. Side rail // 13. Transport / toolbar // 14. Status & badges (success / warning / error, badge text) // 15. Sensor bands (wafer map dots) // 16. Wafer family badges (source list avatars + accent bars) // 17. Comparison & charts (metric grading, diff accent, canvas grid) // 18. Geometry (radius / border width / spacing / sizing) // ============================================================================= // Based on Codex themes: // Dark (oscurange): surface #0B0B0F, ink #E6E6E6 // Light (absolutely): surface #F9F9F7, ink #2D2D2B // Accent (both): #F9B98C QtObject { // ── 1. Mode ────────────────────────────────────────────────────────────── property bool isDarkMode: true // ── 2. Typography ──────────────────────────────────────────────────────── readonly property string uiFontFamily: "Geist, Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" readonly property string codeFontFamily: "\"Geist Mono\", ui-monospace, \"SFMono-Regular\", monospace" // pixelSize scale — map to closest token, tune globally readonly property int font2xs: 9 // tiny metadata readonly property int fontXs: 11 // captions, micro labels readonly property int fontSm: 13 // sidebar labels, secondary readonly property int fontMd: 14 // body, field values readonly property int fontLg: 16 // section headers readonly property int fontXl: 20 // panel / dialog titles readonly property int font2xl: 24 // hero titles readonly property int font3xl: 30 // display readonly property int fontWeightRegular: 400 readonly property int fontWeightMedium: 500 readonly property int fontWeightBold: 700 // ── 3. Motion ──────────────────────────────────────────────────────────── readonly property int durationFast: 120 // micro-interactions (focus ring, hover flash) readonly property int durationBase: 180 // standard transitions (pill switch, row select) readonly property int durationSlow: 260 // larger transitions (panel open/close) readonly property var easeStandard: Easing.OutCubic // ── 4. Tone palette (Codex theme v1 inspired) ──────────────────────────── readonly property color themeSurface: isDarkMode ? "#0B0B0F" : "#F9F9F7" readonly property color themeInk: isDarkMode ? "#E6E6E6" : "#2D2D2B" readonly property color themeAccent: isDarkMode ? "#F9B98C" : "#B87333" readonly property color themeSkill: isDarkMode ? "#479FFA" : "#3B82F6" // blue family both modes readonly property color themeAdded: isDarkMode ? "#40C977" : "#00C853" readonly property color themeRemoved: isDarkMode ? "#FA423E" : "#FF5F38" readonly property color themeViolet: isDarkMode ? "#A78BFA" : "#8B5CF6" readonly property color tone100: themeSurface readonly property color tone150: isDarkMode ? "#101014" : "#F3F3F1" readonly property color tone200: isDarkMode ? "#151518" : "#EEEEEC" readonly property color tone250: isDarkMode ? "#1B1B1F" : "#E8E8E6" readonly property color tone300: isDarkMode ? "#222228" : "#E0E0DE" readonly property color tone350: isDarkMode ? "#2B2B32" : "#D7D7D4" readonly property color toneText: themeInk readonly property color toneMute: isDarkMode ? "#A8A8A1" : "#85857E" readonly property color toneBorder: isDarkMode ? "#2D2D34" : "#D2D2CE" // ── 5. Surfaces ────────────────────────────────────────────────────────── readonly property color pageBackground: tone100 readonly property color cardBackground: tone150 readonly property color panelBackground: tone150 readonly property color workspaceBackground: tone150 readonly property color responseBackground: tone150 readonly property color subtleSectionBackground: tone250 // ── 6. Borders ─────────────────────────────────────────────────────────── readonly property color cardBorder: toneBorder readonly property color cardSurfaceBorder: isDarkMode ? "#3A3A42" : "#C7C7C2" readonly property color responseBorder: toneBorder readonly property color workspaceBorder: toneBorder readonly property color innerFrameBorder: toneBorder readonly property color outerFrameBorder: isDarkMode ? "#3A3A42" : "#C7C7C2" readonly property color softBorder: isDarkMode ? "#24242A" : "#E4E4E1" // ── 7. Text ────────────────────────────────────────────────────────────── readonly property color headingColor: toneText readonly property color bodyColor: toneMute readonly property color subheadingColor: toneMute readonly property color panelTitleText: toneMute readonly property color disabledText: toneMute // ── 8. Controls ────────────────────────────────────────────────────────── // Fields readonly property color fieldBackground: isDarkMode ? "#101014" : "#FFFFFF" readonly property color fieldText: toneText readonly property color fieldPlaceholder: toneMute readonly property color fieldBorder: toneBorder readonly property color fieldBorderFocus: themeAccent // Neutral buttons readonly property color buttonNeutralBackground: tone250 readonly property color buttonNeutralHover: tone300 readonly property color buttonNeutralPressed: isDarkMode ? "#0F0F13" : "#FFFFFF" readonly property color buttonNeutralText: toneText readonly property color buttonPressed: tone300 readonly property color primaryAccent: themeAccent // Checkbox readonly property color checkboxText: toneText // Toggle switch thumb (white knob reads on both track colors) readonly property color toggleThumb: "#FFFFFF" // ── 9. Interaction overlays ────────────────────────────────────────────── // Mode-aware washes. Never use raw Qt.rgba(1,1,1,x) in views: a white // overlay is invisible on light-mode surfaces. readonly property color listHoverBackground: isDarkMode ? Qt.rgba(1, 1, 1, 0.04) : Qt.rgba(0, 0, 0, 0.03) readonly property color listActiveBackground: isDarkMode ? Qt.rgba(1, 1, 1, 0.06) : Qt.rgba(0, 0, 0, 0.05) readonly property color flatButtonHover: isDarkMode ? Qt.rgba(1, 1, 1, 0.08) : Qt.rgba(0, 0, 0, 0.06) readonly property color cardWash: isDarkMode ? Qt.rgba(1, 1, 1, 0.02) : Qt.rgba(0, 0, 0, 0.02) // ── 10. Tracks (pill toggle, scrollbar thumb) ──────────────────────────── readonly property color trackBackground: isDarkMode ? "#25252B" : "#E2E2DE" // ── 11. Tabs (mode toggle pills) ───────────────────────────────────────── readonly property color tabActiveBackground: isDarkMode ? "#25252B" : "#FFFFFF" // ── 12. Side rail ──────────────────────────────────────────────────────── readonly property color sideRailBackground: tone150 readonly property color sidePanelBackground: isDarkMode ? "#151518" : "#F3F3F1" readonly property color sideActiveBackground: isDarkMode ? "#25252B" : "#FFFFFF" readonly property color sideBorder: toneBorder readonly property color sideMutedText: toneMute // ── 13. Transport / toolbar surfaces ───────────────────────────────────── readonly property color transportButtonBg: tone250 readonly property color transportButtonHover: tone300 readonly property color liveColor: themeAdded readonly property color recordColor: themeRemoved // ── 14. Status & badges ────────────────────────────────────────────────── readonly property color statusSuccessColor: themeAdded readonly property color statusWarningColor: isDarkMode ? "#E8A817" : "#B8860B" // amber/yellow, separate from accent readonly property color statusErrorColor: themeRemoved // Text placed ON a filled status pill / saturated chip: readonly property color statusBadgeText: "#111111" // dark ink on bright status fills, both modes readonly property color textOnColor: "#FFFFFF" // white text on deep saturated fills (avatars etc.) // Error banner (soft red surface + readable red text) readonly property color errorSurface: Qt.alpha(statusErrorColor, 0.15) readonly property color errorTextSoft: isDarkMode ? "#FCA5A5" : "#B91C1C" // ── 15. Sensor bands (wafer map dots) ──────────────────────────────────── readonly property color sensorInRange: statusSuccessColor // ponytail: high-temp shares error red — semantically correct (dangerous value), // re-hue if colorblind testing demands a different channel. readonly property color sensorHigh: statusErrorColor readonly property color sensorLow: themeSkill readonly property color waferRingColor: toneBorder readonly property color waferAxisColor: softBorder // ── 16. Wafer family badges (SourcePanel list) ─────────────────────────── // Accent = left bar / outline shade; Fill = avatar circle behind textOnColor. // Family grouping mirrors FileBrowser's waferType first-letter convention. readonly property color familyBlueAccent: "#3B82F6" // A / E / P readonly property color familyBlueFill: "#1D4ED8" readonly property color familyGreenAccent: "#10B981" // B / C / D readonly property color familyGreenFill: "#065F46" readonly property color familyVioletAccent: "#8B5CF6" // Z readonly property color familyVioletFill: "#7C3AED" readonly property color familyNeutralFill: "#374151" // unknown family // ── 17. Comparison & charts ────────────────────────────────────────────── // Metric grading for DTW readout cards (good → caution → bad). // Dark values are pastel (readable on tone150); light values are deepened // so they still pass on near-white cards. readonly property color metricGood: isDarkMode ? "#6EE7B7" : "#059669" readonly property color metricWarn: isDarkMode ? "#FDE047" : "#B45309" readonly property color metricBad: isDarkMode ? "#EF4444" : "#DC2626" // DIFF column accent in ReadoutPanel readonly property color diffAccent: themeViolet // Canvas chart primitives (DTW plot grid + axis labels) readonly property color chartGridLine: isDarkMode ? Qt.rgba(1, 1, 1, 0.08) : Qt.rgba(0, 0, 0, 0.10) readonly property color chartAxisText: isDarkMode ? Qt.rgba(1, 1, 1, 0.35) : Qt.rgba(0, 0, 0, 0.45) // ── 18. Geometry ───────────────────────────────────────────────────────── // Radius readonly property int radiusXs: 6 // fields, tight elements readonly property int radiusSm: 8 // buttons readonly property int radiusMd: 12 // cards, group boxes readonly property int radiusLg: 18 // 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: 280 readonly property int sideRailMargin: 16 readonly property int sideRailSpacing: 16 readonly property int sideButtonHeight: 44 readonly property int sidePanelRadius: 10 readonly property int sideFooterConnection: 100 readonly property int sideFooterUtility: 46 readonly property int sidePillHeight: 54 // 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 }