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)
This commit is contained in:
jack
+105
-53
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user