refactor(ui): consolidate Theme.qml tokens and replace unicode glyphs with SVG icons
This commit is contained in:
jack
+73
-27
@@ -7,18 +7,23 @@ import QtQuick
|
||||
// =============================================================================
|
||||
// Sections:
|
||||
// 1. Mode flag
|
||||
// 2. Typography
|
||||
// 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)
|
||||
// 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)
|
||||
// 9. Tracks (pill toggle + scrollbar)
|
||||
// 10. Tabs (footer tab bar)
|
||||
// 11. Side rail
|
||||
// 12. Status (success / warning / error)
|
||||
// 13. Geometry (radius / border width / spacing / sizing)
|
||||
// 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
|
||||
@@ -29,7 +34,10 @@ QtObject {
|
||||
// ── 1. Mode ──────────────────────────────────────────────────────────────
|
||||
property bool isDarkMode: true
|
||||
|
||||
// ── 2. Typography ──────────────────────────────────────────────────────
|
||||
// ── 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
|
||||
@@ -44,22 +52,20 @@ QtObject {
|
||||
readonly property int fontWeightMedium: 500
|
||||
readonly property int fontWeightBold: 700
|
||||
|
||||
// ── 3. Motion ──────────────────────────────────────────────────────────
|
||||
// ── 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 string uiFontFamily: "Geist, Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
|
||||
readonly property string codeFontFamily: "\"Geist Mono\", ui-monospace, \"SFMono-Regular\", monospace"
|
||||
|
||||
// ── 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"
|
||||
@@ -71,7 +77,7 @@ QtObject {
|
||||
readonly property color toneMute: isDarkMode ? "#A8A8A1" : "#85857E"
|
||||
readonly property color toneBorder: isDarkMode ? "#2D2D34" : "#D2D2CE"
|
||||
|
||||
// ── 3. Surfaces ──────────────────────────────────────────────────────────
|
||||
// ── 5. Surfaces ──────────────────────────────────────────────────────────
|
||||
readonly property color pageBackground: tone100
|
||||
readonly property color cardBackground: tone150
|
||||
readonly property color panelBackground: tone150
|
||||
@@ -79,7 +85,7 @@ QtObject {
|
||||
readonly property color responseBackground: tone150
|
||||
readonly property color subtleSectionBackground: tone250
|
||||
|
||||
// ── 4. Borders ───────────────────────────────────────────────────────────
|
||||
// ── 6. Borders ───────────────────────────────────────────────────────────
|
||||
readonly property color cardBorder: toneBorder
|
||||
readonly property color cardSurfaceBorder: isDarkMode ? "#3A3A42" : "#C7C7C2"
|
||||
readonly property color responseBorder: toneBorder
|
||||
@@ -88,14 +94,14 @@ QtObject {
|
||||
readonly property color outerFrameBorder: isDarkMode ? "#3A3A42" : "#C7C7C2"
|
||||
readonly property color softBorder: isDarkMode ? "#24242A" : "#E4E4E1"
|
||||
|
||||
// ── 5. Text ──────────────────────────────────────────────────────────────
|
||||
// ── 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
|
||||
|
||||
// ── 6. Controls ──────────────────────────────────────────────────────────
|
||||
// ── 8. Controls ──────────────────────────────────────────────────────────
|
||||
// Fields
|
||||
readonly property color fieldBackground: isDarkMode ? "#101014" : "#FFFFFF"
|
||||
readonly property color fieldText: toneText
|
||||
@@ -111,32 +117,48 @@ QtObject {
|
||||
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"
|
||||
|
||||
// ── 7. Tracks (pill toggle, scrollbar thumb) ─────────────────────────────
|
||||
// ── 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"
|
||||
|
||||
// ── 8. Tabs (mode toggle pills) ──────────────────────────────────────────
|
||||
// ── 11. Tabs (mode toggle pills) ─────────────────────────────────────────
|
||||
readonly property color tabActiveBackground: isDarkMode ? "#25252B" : "#FFFFFF"
|
||||
|
||||
// ── 9. Side rail ─────────────────────────────────────────────────────────
|
||||
// ── 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
|
||||
|
||||
// ── 10a. Transport / toolbar surfaces ────────────────────────────────────
|
||||
// ── 13. Transport / toolbar surfaces ─────────────────────────────────────
|
||||
readonly property color transportButtonBg: tone250
|
||||
readonly property color transportButtonHover: tone300
|
||||
readonly property color liveColor: themeAdded
|
||||
readonly property color recordColor: themeRemoved
|
||||
|
||||
// ── 10. Status ───────────────────────────────────────────────────────────
|
||||
// ── 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"
|
||||
|
||||
// -- 10b. Sensor bands (wafer map dots)
|
||||
// ── 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.
|
||||
@@ -145,7 +167,31 @@ QtObject {
|
||||
readonly property color waferRingColor: toneBorder
|
||||
readonly property color waferAxisColor: softBorder
|
||||
|
||||
// ── 11. Geometry ─────────────────────────────────────────────────────────
|
||||
// ── 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
|
||||
|
||||
Reference in New Issue
Block a user