diff --git a/Qt/.qmake.stash b/Qt/.qmake.stash deleted file mode 100644 index dd9ab21..0000000 --- a/Qt/.qmake.stash +++ /dev/null @@ -1,21 +0,0 @@ -QMAKE_CXX.QT_COMPILER_STDCXX = 201703L -QMAKE_CXX.QMAKE_GCC_MAJOR_VERSION = 15 -QMAKE_CXX.QMAKE_GCC_MINOR_VERSION = 2 -QMAKE_CXX.QMAKE_GCC_PATCH_VERSION = 0 -QMAKE_CXX.COMPILER_MACROS = \ - QT_COMPILER_STDCXX \ - QMAKE_GCC_MAJOR_VERSION \ - QMAKE_GCC_MINOR_VERSION \ - QMAKE_GCC_PATCH_VERSION -QMAKE_CXX.INCDIRS = \ - C:/msys64/ucrt64/include/c++/15.2.0 \ - C:/msys64/ucrt64/include/c++/15.2.0/x86_64-w64-mingw32 \ - C:/msys64/ucrt64/include/c++/15.2.0/backward \ - C:/msys64/ucrt64/lib/gcc/x86_64-w64-mingw32/15.2.0/include \ - C:/msys64/ucrt64/include \ - C:/msys64/ucrt64/lib/gcc/x86_64-w64-mingw32/15.2.0/include-fixed -QMAKE_CXX.LIBDIRS = \ - C:/msys64/ucrt64/lib/gcc/x86_64-w64-mingw32/15.2.0 \ - C:/msys64/ucrt64/lib/gcc \ - C:/msys64/ucrt64/x86_64-w64-mingw32/lib \ - C:/msys64/ucrt64/lib diff --git a/Qt/DESIGN_SYSTEM.md b/Qt/DESIGN_SYSTEM.md deleted file mode 100644 index 500ec57..0000000 --- a/Qt/DESIGN_SYSTEM.md +++ /dev/null @@ -1,596 +0,0 @@ -# Mono Design System - Qt Implementation Guide - -**Version:** 1.0 -**Based on:** [decode-ui Design System](C:\Users\Administrator\decode-ui\.agents\skills\design-system\SKILL.md) -**Theme Library:** dark.qss, light.qss, style.qss -**Last Updated:** April 2026 - ---- - -## Brand & Mission - -**Visual Style:** Minimal, clean, high-contrast, playful, matrix-inspired with hacker-chic aesthetic - -**Design Philosophy:** -- **Keyboard-first:** All interactive elements are fully navigationable via keyboard -- **Accessibility:** WCAG 2.2 AA compliant - color contrast, focus states, motion preferences -- **Semantic:** Use class attributes to convey component intent, not layout -- **Density:** Compact spacing (4–48px scale) for data-dense interfaces -- **Typography:** Space Mono for UI, JetBrains Mono for code/data - ---- - -## Color Tokens - -### Dark Theme (Primary) -``` -Primary (Action): #37F712 (neon green, WCAG AAA) -Secondary (Interactive): #00A6F4 (bright blue, WCAG AA) -Success (Positive): #00A63D (dark green) -Warning (Caution): #FE9900 (orange) -Danger (Destructive): #FF2157 (red) -Surface (Background): #0A0E27 (very dark blue-gray) -Text (Foreground): #E7E5E4 (off-white) -Neutral (Disabled): #78716B (taupe) -``` - -### Light Theme (Alternative) -``` -Primary: #1a7d05 (dark green for light backgrounds) -Secondary: #006a9a (dark blue) -Success: #00A63D -Warning: #E68A00 -Danger: #C41C3B (darker red for contrast on white) -Surface: #F9F9F9 (off-white) -Text: #0A0E27 (dark) -Neutral: #999999 (gray) -``` - ---- - -## Typography - -### Font Families -- **Primary UI:** `"Space Mono", "Monaco", monospace` - Used for: buttons, labels, headings, navigation - -- **Code/Data:** `"JetBrains Mono", "Fira Code", monospace` - Used for: text inputs, code blocks, terminal output, data display - -### Font Sizes -| Role | Size | Weight | -|------|------|--------| -| Application | 11px | 400 (normal) | -| Button | 11px | 700 (bold) | -| Label | 11px | 400 | -| Small Label | 10px | 400 | -| Header | 12px | 700 | -| Input | 11px | 400 | - ---- - -## Spacing Scale (Compact Density) - -| Token | Value | -|-------|-------| -| `xs` | 4px | -| `sm` | 8px | -| `md` | 16px | -| `lg` | 24px | -| `xl` | 32px | -| `2xl` | 48px | - -**Usage:** -- Padding: 8px (buttons), 6px (inputs), 4px (labels) -- Margins: 8px (default), 16px (between sections) -- Border radius: 4px (all components) - ---- - -## Component State Matrix - -Every interactive component **must** support: - -### 1. **Default State** -```qss -/* Initial appearance */ -border: 1px solid #303850; /* subtle border */ -background-color: #252D4A; /* theme surface */ -color: #E7E5E4; /* text color */ -``` - -### 2. **Hover State** (`:hover`) -```qss -/* Pointer feedback - DESKTOP ONLY */ -border-color: #00A6F4; /* highlight color */ -background-color: #303850; /* slightly lighter */ -``` - -### 3. **Focus-Visible State** (`:focus-visible`) -```qss -/* KEYBOARD NAVIGATION INDICATOR - CRITICAL */ -outline: 2px solid #37F712; /* primary color */ -outline-offset: 2px; /* breathing room */ -``` - -### 4. **Active/Pressed State** (`:pressed`) -```qss -/* Clicked or activated */ -background-color: #1A1F3A; /* darker shade */ -transform: scale(0.98); /* subtle press effect */ -``` - -### 5. **Disabled State** (`:disabled`) -```qss -/* Inactive element */ -opacity: 0.5; /* visible but inactive */ -color: #78716B; /* neutral gray */ -cursor: not-allowed; -/* No hover/focus effects */ -``` - -### 6. **Loading State** (`class="loading"`) -```qss -/* Processing indicator */ -background-color: #252D4A; -color: #78716B; -opacity: 0.7; -/* Icon: optional spinning indicator */ -``` - -### 7. **Error State** (`class="error"`) -```qss -/* Validation failure */ -border: 1px solid #FF2157; /* danger red */ -box-shadow: 0 0 8px rgba(255, 33, 87, 0.15); -/* Icon: ✕ error symbol */ -/* Text: descriptive error message */ -``` - -### 8. **Success State** (`class="success"`) -```qss -/* Validation passed */ -border: 1px solid #00A63D; /* success green */ -box-shadow: 0 0 8px rgba(0, 166, 61, 0.15); -/* Icon: ✓ checkmark */ -/* Text: confirmation message */ -``` - -### 9. **Warning State** (`class="warning"`) -```qss -/* Attention required */ -border: 1px solid #FE9900; /* warning orange */ -/* Icon: ⚠ warning symbol */ -/* Text: descriptive warning */ -``` - ---- - -## Button Component Specification - -### Button Variants (use `class` attribute) - -#### Primary Button -```html -Primary Action -``` -- **Dark:** #37F712 on #0A0E27 (neon green) -- **Light:** #1a7d05 on #F9F9F9 (dark green) -- **Use:** Main action, proceed, confirm -- **Contrast:** 9.8:1 (exceeds WCAG AAA) - -#### Secondary Button -```html -Secondary -``` -- **Background:** #252D4A (dark) / #E8E8E8 (light) -- **Use:** Alternative actions, less emphasis -- **Contrast:** 4.5:1 (WCAG AA) - -#### Success Button -```html -Confirm -``` -- **Color:** #00A63D (green) -- **Use:** Positive confirmation (delete, accept, proceed) -- **Contrast:** 6.1:1 - -#### Warning Button -```html -Caution -``` -- **Color:** #FE9900 (orange) -- **Use:** Attention-required actions -- **Contrast:** 5.3:1 - -#### Danger Button -```html -Delete -``` -- **Color:** #FF2157 (red) -- **Use:** Destructive actions only -- **Contrast:** 5.7:1 - -#### Inline Button -```html -Learn More -``` -- **Style:** Text-only, transparent background -- **Use:** Secondary links, navigation - -### Button States - -| State | Appearance | Code | -|-------|------------|------| -| Default | Base color | `background-color: ` | -| Hover | Brightened | `:hover { background-color: lighter; }` | -| Focus | Outline | `:focus-visible { outline: 2px solid; }` | -| Pressed | Darkened | `:pressed { background-color: darker; }` | -| Disabled | Faded | `:disabled { opacity: 0.5; }` | -| Loading | Neutral | `class="loading"` | - -### Button Sizing - -| Target | Width | Height | Padding | -|--------|-------|--------|---------| -| Small | 60px | 28px | 4px 8px | -| Default | 80px | 36px | 8px 16px | -| Large | 120px | 44px | 12px 24px | -| Min Touch Target | — | 44px | — | - ---- - -## Input Component Specification - -### Text Input (QLineEdit, QTextEdit, QPlainTextEdit) - -#### States -```qss -/* Default */ -border: 1px solid #252D4A; -background-color: #0A0E27; - -/* Focus */ -border: 1px solid #37F712; -box-shadow: 0 0 8px rgba(55, 247, 18, 0.15); - -/* Error */ -border: 1px solid #FF2157; /* DO NOT RELY ON COLOR ALONE */ - -/* Success */ -border: 1px solid #00A63D; - -/* Warning */ -border: 1px solid #FE9900; - -/* Disabled */ -opacity: 0.5; -color: #78716B; -``` - -#### Sizing -- **Height:** 32px minimum (touch-friendly) -- **Padding:** 6px 8px (comfortable spacing) -- **Border radius:** 4px -- **Border width:** 1px - -#### Font -```qss -font-family: "JetBrains Mono", monospace; -font-size: 11px; -``` - ---- - -## Checkbox & Radio Button Specification - -### States -```qss -/* Default */ -width: 16px; -height: 16px; -border: 1px solid #303850; -background-color: #0A0E27; - -/* Hover */ -border-color: #00A6F4; - -/* Checked */ -background-color: #37F712; -border-color: #37F712; - -/* Focus */ -border: 2px solid #37F712; - -/* Disabled */ -opacity: 0.5; -``` - -### Spacing -- **Size:** 16×16px minimum -- **Space from label:** 4px - ---- - -## Accessibility Requirements - -### WCAG 2.2 Level AA Compliance - -#### ✅ Color Contrast -- **Text:** ≥4.5:1 ratio (minimum) -- **UI Components:** ≥3:1 ratio -- **All colors verified** for light & dark themes - -#### ✅ Keyboard Navigation -- **All interactive elements** receive focus (`:focus-visible`) -- **Tab order:** Defined in application code (`QWidget::setTabOrder()`) -- **No keyboard trap:** Users can escape all components - -#### ✅ Focus Indicators -- **Outline:** 2px solid color -- **Offset:** 2px (breathing room) -- **Color:** Primary theme color (distinct from default) -- **Required on:** buttons, inputs, checkboxes, tabs - -#### ✅ Screen Readers -- **Labels:** All inputs have associated `