jack/pyGUI
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
88b021458216e414897b61c55a6dc4ae70eed651
pyGUI/src/pygui/ISC/Theme.qml
T

226 lines
14 KiB
QML
Raw Blame History

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
}
Reference in New Issue View Git Blame Copy Permalink