Quartz 4

FIRE Design System Architecture

3 min read

1. Filosofia: “Silent Precision”

Il Design System di FIRE non è decorativo, è funzionale. In una piattaforma di analisi quantitativa ad alta densità di informazioni, l’interfaccia deve essere “invisibile” per permettere ai dati di emergere.

L’architettura visiva si basa su tre pilastri:

  1. Neutral-First: I controlli operativi (pulsanti, barre) utilizzano toni neutri (Grigi Professionali) per non competere con i segnali di trading.
  2. Semantic-Coloring: Il colore viene utilizzato esclusivamente per comunicare un significato (Stato, Brand, Trading Sentiment).
  3. Adaptive-Geometry: Le dimensioni e gli spazi sono calibrati per massimizzare l’area utile (Bordi 6px, Controlli 12-14px).

2. Architettura Adattiva (Dark & Light Mode)

Il cuore del sistema è il ThemeManager, che opera come un motore di stato. Non esistono più colori “fissi” per gli elementi strutturali, ma “Atomi Adattivi”.

2.1. Logica di Rilevamento

Il sistema determina la modalità corrente analizzando la luminanza dello sfondo dei grafici (chart_backgroundColor).

  • Luminanza < 128: Dark Mode (Default operativo).
  • Luminanza >= 128: Light Mode (Reportistica e Stampa).

2.2. Dizionario degli Atomi Strutturali

Queste chiavi cambiano valore automaticamente. È vietato hard-codare i colori esadecimali nei widget.

Chiave SemanticaUsoDark Mode (Ref)Light Mode (Ref)
ui_report_bgSfondo Pagina/Pannello#121212#ffffff
ui_card_bgSfondo Contenitori/Card#1a1a1c#f0f2f5
ui_border_colorLinee, Separatori, Bordi#2a2e39#e0e0e0
ui_report_textTesto Principale#d1d4dc#2c3e50
ui_text_mutedTesto Secondario/Desc#9499a6#6c757d
ui_icon_colorTinting Icone SVG#ffffff#2c3e50

3. Ontologia dei Colori (Gerarchia Semantica)

L’uso del colore è strettamente regolamentato. Non usare mai un colore solo perché “sta bene”.

3.1. Brand Layer (Identità)

  • Chiave: color_fire_orange (#e67e22)
  • Uso: Focus attivo, Selezione, Tab corrente, Bordi di evidenziazione.
  • Non usare per: Pulsanti di azione standard, sfondi di aree estese.

3.2. Trading Layer (Sentiment)

  • Chiave: color_success_green (#26a69a) / chart_downColor (#ef5350)
  • Uso: Segnali Bullish/Bearish, Profit/Loss, Metriche di sicurezza (es. “Safe Stop”).
  • Regola: Il verde e il rosso non devono mai essere usati per azioni UI generiche (es. “Salva file”), ma solo per dati finanziari.

3.3. Functional Layer (Interazione)

  • Chiave: button_action_bg (#4F4F51)
  • Uso: Pulsanti “Run”, “Calcola”, “Apri”.
  • Comportamento: Grigio scuro a riposo, grigio più chiaro in hover. Garantisce che l’interfaccia non distragga l’occhio dai grafici.

4. Specifiche Tecniche dei Componenti

Il ThemeManager espone generatori di stile QSS (Qt StyleSheet) centralizzati.

4.1. Checkbox (“Solid-Fill Standard”)

  • Design: Quadrato compatto senza glifo complesso.
  • Stato Unchecked: Sfondo trasparente, Bordo ui_border_color (sempre visibile).
  • Stato Checked: Riempimento solido Arancione (color_fire_orange).
  • Dimensione: 14px (Box), 3px (Radius).
  • Implementazione: ThemeManager.get_checkbox_style()

4.2. Radio Button (“Native-Replica”)

  • Design: Cerchio perfetto con indicatore flottante.
  • Stato Unchecked: Anello sottile ui_border_color.
  • Stato Checked: Anello Arancione + Pallino interno solido (SVG Data URI).
  • Dimensione: 12px (Diametro), 6px (Radius = 50%).
  • Implementazione: ThemeManager.get_radio_button_style()

4.3. Pulsanti (“Neutral-First”)

  • Design: Rettangolo smussato, look “Desktop App”.
  • Stile: Sfondo Grigio #4F4F51, Testo Bianco Bold.
  • Geometria: Altezza min 32px/36px, Border Radius 6px.
  • Implementazione: ThemeManager.apply_primary_button_style(btn)

5. Gestione Risorse (Smart Icon Engine)

Le icone sono parte integrante del Design System e devono adattarsi al contrasto.

  • Tecnologia: ResourceManager v1.4 con Caching e Dynamic Tinting.
  • Formato: SVG monocromatici.
  • Comportamento: Il manager “dipinge” l’icona usando ui_icon_color prima di servirla.
    • Dark Mode → Icona Bianca.
    • Light Mode → Icona Grigio Scuro.
  • API: ResourceManager.get_icon("nome.svg")

6. Esposizione SDK (Extensibility)

Il Design System è esposto agli script esterni tramite ScriptContext.theme. Questo permette alle estensioni di ereditare automaticamente:

  1. Colori: context.theme.primary, context.theme.background.
  2. Font: context.theme.font_family.
  3. Contrasto: I grafici Plotly generati via SDK usano la logica “Smart Contrast” per decidere se usare testi chiari o scuri in base al contesto di rendering (Report vs App).

Graph View