From 3fef31efff9729453a3aefbf7f0949881d4aca85 Mon Sep 17 00:00:00 2001 From: jack Date: Mon, 29 Jun 2026 14:55:50 -0700 Subject: [PATCH] feat(theme): update design tokens, typography scale, and color palette - Add new tone palette entries and sensor color tokens - Add codeFontFamily and uiFontFamily definitions - Update motion/easing tokens - Add transport bar, side rail, and status color tokens - Revise geometry tokens (radius, spacing, sizing) --- src/pygui/ISC/Theme.qml | 158 ++++++++++++++++++++++++++-------------- 1 file changed, 105 insertions(+), 53 deletions(-) diff --git a/src/pygui/ISC/Theme.qml b/src/pygui/ISC/Theme.qml index 1b1ff1c..941b0c5 100644 --- a/src/pygui/ISC/Theme.qml +++ b/src/pygui/ISC/Theme.qml @@ -7,49 +7,89 @@ import QtQuick // ============================================================================= // 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) +// 2. Typography +// 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) +// 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) // ============================================================================= +// 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. Tone palette (base values; consume via semantic tokens below) ───── - readonly property color tone100: isDarkMode ? "#111111" : "#FAFAFA" - readonly property color tone150: isDarkMode ? "#161616" : "#F6F6F6" - readonly property color tone200: isDarkMode ? "#1A1A1A" : "#F0F0F0" - readonly property color tone250: isDarkMode ? "#212121" : "#EAEAEA" - readonly property color tone300: isDarkMode ? "#282828" : "#E2E2E2" - readonly property color tone350: isDarkMode ? "#303030" : "#D6D6D6" - readonly property color toneText: isDarkMode ? "#F2F2F2" : "#111111" - readonly property color toneMute: isDarkMode ? "#A8A8A8" : "#8A8A8A" - readonly property color toneBorder: isDarkMode ? "#2E2E2E" : "#D4D4D4" + // ── 2. Typography ────────────────────────────────────────────────────── + // 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 + + // Legacy shim + readonly property int tabFontSize: fontSm + + // ── 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" + + 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 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" // ── 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 + 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 // ── 4. Borders ─────────────────────────────────────────────────────────── readonly property color cardBorder: toneBorder - readonly property color cardSurfaceBorder: isDarkMode ? "#3C3C3C" : "#C8C8C8" + 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 ? "#383838" : "#CACACA" - readonly property color softBorder: isDarkMode ? "#252525" : "#E0E0E0" + readonly property color outerFrameBorder: isDarkMode ? "#3A3A42" : "#C7C7C2" + readonly property color softBorder: isDarkMode ? "#24242A" : "#E4E4E1" // ── 5. Text ────────────────────────────────────────────────────────────── readonly property color headingColor: toneText @@ -60,53 +100,61 @@ QtObject { // ── 6. Controls ────────────────────────────────────────────────────────── // Fields - readonly property color fieldBackground: tone100 + 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: toneText + readonly property color fieldBorderFocus: themeAccent // Neutral buttons - readonly property color buttonNeutralBackground: tone300 - readonly property color buttonNeutralHover: isDarkMode ? "#303030" : "#DDDDDD" - readonly property color buttonNeutralPressed: tone100 + 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: toneText + readonly property color primaryAccent: themeAccent // Checkbox readonly property color checkboxText: toneText // ── 7. Tracks (pill toggle, scrollbar thumb) ───────────────────────────── - readonly property color trackBackground: isDarkMode ? "#25252B" : "#D1D5DB" + readonly property color trackBackground: isDarkMode ? "#25252B" : "#E2E2DE" // ── 8. Tabs (footer tab bar) ───────────────────────────────────────────── readonly property color tabBarBackground: tone200 readonly property color tabBackground: "transparent" - readonly property color tabActiveBackground: isDarkMode ? "#333333" : "#FFFFFF" - readonly property color tabHoverBackground: tone300 + readonly property color tabActiveBackground: isDarkMode ? "#25252B" : "#FFFFFF" + readonly property color tabHoverBackground: tone250 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 + 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 + readonly property color sideAccent: themeAccent + readonly property color sideRowHover: tone250 + readonly property color sideFieldBackground: isDarkMode ? "#101014" : "#FFFFFF" // ── 10a. Transport / toolbar surfaces ──────────────────────────────────── - readonly property color transportBackground: isDarkMode ? "#0D0D0D" : "#E8E8E8" - readonly property color transportButtonBg: isDarkMode ? "#2A2A2A" : "#D4D4D4" - readonly property color transportButtonHover: isDarkMode ? "#3A3A3A" : "#C4C4C4" - readonly property color liveColor: isDarkMode ? "#22C55E" : "#16A34A" - readonly property color recordColor: isDarkMode ? "#EF4444" : "#DC2626" + readonly property color transportBackground: isDarkMode ? "#101014" : "#EFEFED" + readonly property color transportButtonBg: tone250 + readonly property color transportButtonHover: tone300 + readonly property color liveColor: themeAdded + readonly property color recordColor: themeRemoved // ── 10. Status ─────────────────────────────────────────────────────────── - readonly property color statusSuccessColor: isDarkMode ? "#63D471" : "#2E9E44" - readonly property color statusWarningColor: isDarkMode ? "#F5C15C" : "#C88A18" - readonly property color statusErrorColor: isDarkMode ? "#FF6B6B" : "#D64545" + readonly property color statusSuccessColor: themeAdded + readonly property color statusWarningColor: isDarkMode ? "#E8A817" : "#B8860B" // amber/yellow, separate from accent + readonly property color statusErrorColor: themeRemoved // -- 10b. 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: isDarkMode ? "#5B9DF5" : "#2F6FE0" + readonly property color sensorLow: themeSkill readonly property color waferRingColor: toneBorder readonly property color waferAxisColor: softBorder @@ -124,16 +172,20 @@ QtObject { 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 + 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 // Tab bar layout readonly property int tabBarHeight: 34 + readonly property int sidePillHeight: 54 + readonly property int sidePillButtonHeight: 36 readonly property int tabBarPadding: 6 readonly property int tabSpacing: 2 readonly property int tabRadius: 8 - readonly property int tabFontSize: 12 readonly property int tabButtonMinWidth: 80 // Settings page layout readonly property int settingsPanelMaxWidth: 760