/* ========================================================================= tokens.css - design tokens di QuoParts Slot di marchio derivati dal marchio del sito. Slot di sistema FISSI: non modificare. DERIVATION NOTE source : colore dato dal committente #0092D2, lo stesso blu del logo images/logo_quoparts.png (ingranaggio e "quo") elected : primary #0072A4 primary-bright #0092D2 hover #005F88 dark #004969 accent #19408E #0092D2 vale 3,48:1 con testo bianco, sotto il minimo di 4,5:1: resta il valore dei riempimenti decorativi, e il primario e' la stessa tinta scurita fino a superare 4,5:1 anche come colore di link sul fondo dell'applicazione e sul fondo infossato. accent: il blu notte che il sito usa gia' per l'ordine veloce. contrast : on-primary 5,33:1 on-hover 7,02:1 on-dark 9,74:1 on-accent 9,70:1 on-bright 3,48:1 (solo decorativo, mai testo) primary come colore di link: 4,70:1 su --rg-app-bg, 4,76:1 su --rg-surface-sunken, 4,74:1 su --brand-primary-subtle header : la barra resta chiara come l'intestazione di prima, con il logo a colori: fondo --rg-surface, testo --rg-text fonts : corpo DM Sans, da Google Fonts. Nessun carattere di display. ========================================================================= */ :root { --bg-header: var(--rg-surface); --color-header: var(--rg-text); --color-header-hover: var(--rg-text-strong); /* ---- BRAND (QuoParts) ---- */ --brand-primary: #0072A4; --brand-primary-rgb: 0, 114, 164; --brand-primary-hover: #005F88; --brand-primary-bright: #0092D2; /* colore del marchio: SOLO riempimenti decorativi (§2.1.4) */ --brand-dark: #004969; --brand-accent: #19408E; --brand-primary-subtle: #E6F4FA; --brand-primary-subtle: color-mix(in srgb, var(--brand-primary-bright) 10%, #ffffff); --brand-on-primary: #ffffff; /* ---- SEMANTIC (fixed) ---- */ --rg-success: #17AE91; --rg-danger: #F04242; --rg-danger-hover: #EE2D2D; --rg-warning: #FBCF00; --rg-info: #276D94; --rg-info-hover: #18435A; --rg-neutral-dark: #18435A; --rg-secondary: #D2D2D2; --rg-invalid-border: #DC3545; --rg-alert: #E30D1D; /* ---- STRUCTURAL NEUTRALS (fixed) ---- */ --rg-app-bg: #EFF1F3; --rg-surface: #FFFFFF; --rg-surface-sunken: #F2F2F2; --rg-surface-hover: #EAEAEA; --rg-row-hover: #F9F9F9; --rg-border: #DEE2E6; --rg-border-strong: #B2B2B2; --rg-rule: #CCCCCC; --rg-text: #333333; --rg-text-strong: #212529; --rg-text-black: #000000; --rg-label: #4B5563; /* testo STRUTTURALE: th, intestazioni di gruppo, etichette di campo — 7,6:1 */ --rg-caption: #6B7280; /* testo attenuato, solo secondario — 4,8:1, il minimo per qualunque testo */ --rg-text-muted: #AAAAAA; /* valore legacy, SOLO non-testo */ --rg-text-muted-2: #888A8B; /* solo link di sidebar inattivo */ --rg-text-muted-3: #95A3B0; /* valore legacy, SOLO non-testo — era 2,6:1 come testo di intestazione */ --rg-track: #D1D5DB; --rg-track-text: #6B7280; /* ---- ACTION BUTTONS (fixed) ---- */ --rg-add: #00EC82; --rg-add-hover: #00D977; --rg-del: #F04242; --rg-del-hover: #EE2D2D; --rg-save: #FFA52B; --rg-save-hover: #FB9100; --rg-download: #FFD83B; --rg-download-hover: #FFCD00; --rg-back: #F2C800; --rg-back-hover: #DFB800; --rg-search: #0496FF; --rg-search-hover: #0085E8; --rg-chat: #30BEFB; --rg-chat-hover: #04AEF7; --rg-whatsapp: #30D24E; --rg-whatsapp-hover: #29BC43; /* ---- GEOMETRY (fixed) ---- */ --rg-radius-input: 12px; --rg-radius-card: 1rem; --rg-radius-pill: 2rem; --rg-radius-select2: 16px; --rg-radius-accordion: 16px; --rg-radius-modal: 45px; /* ---- LAYOUT (fixed) ---- */ --sidebar-width: 280px; --sidebar-width-collapsed: 90px; --header-height: 55px; --slideover-width: 300px; /* ---- SHADOWS (fixed) ---- */ --rg-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075); --rg-shadow-md: 0 .25rem .25rem rgba(0,0,0,.075); --rg-shadow-dashboard: 0 0 5px 1px rgba(0,0,0,.075); --rg-shadow-toggle: 0 2px 6px rgba(0,0,0,.15); /* ---- TYPOGRAPHY (fixed) ---- */ --rg-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --brand-font-display: var(--rg-font-body); /* ---- AGGIUNTI DAL PROGETTO (non sono di Parte 4) ---- Parte 4 non da' un colore allo skeleton: Bootstrap rende .placeholder come currentColor al 50%, cioe' --rg-text al 50%, un grigio medio troppo carico per una forma che deve solo suggerire l'ingombro di cio' che sta arrivando. Il token e' il colore PIENO: reso al 50% da Bootstrap vale #E9ECEF su bianco. Vedi DESIGN-LOG DL-020. */ --rg-skeleton: #D3D9DF; } /* Bootstrap semantic overrides — mirror of the reference app */ .text-bg-dark { background: var(--rg-neutral-dark) !important; } .text-bg-success { background: var(--rg-success) !important; } .text-bg-warning { background: var(--rg-warning) !important; } .text-bg-danger { background: var(--rg-danger) !important; } .text-bg-secondary { background: var(--rg-secondary) !important; color: #000 !important; } .text-bg-primary { background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; } .text-dark { color: #000 !important; } .text-success { color: var(--rg-success) !important; } .text-danger { color: var(--rg-danger) !important; } .text-warning { color: var(--rg-warning) !important; } .text-secondary { color: var(--rg-secondary) !important; } .text-primary { color: var(--brand-primary) !important; } a { color: var(--rg-text); text-decoration: none; } .btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-on-primary); } .btn-primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); } /* Generic status ramp. La coppia del rosso esce anche come VARIABILI: serve dove lo stato non e' una pastiglia ma una RIGA intera - il cliente non attivo in \xabI Miei Clienti\xbb - e il foglio del kit non puo' scrivere esadecimali. E' la stessa coppia, non un rosso nuovo. */ :root { --rg-flg-3-fg: #F34E5F; --rg-flg-3-bg: #FEE7E9; } .text-bg-flg-0 { color:#978D71; background:#EDECE6; } .text-bg-flg-1 { color:#4978D8; background:#EDF5FF; } .text-bg-flg-2 { color:#E68B52; background:#FFF7ED; } .text-bg-flg-3 { color:var(--rg-flg-3-fg); background:var(--rg-flg-3-bg); } .text-bg-flg-4 { color:#9B7EBD; background:#EEE9F3; } .text-bg-flg-9 { color:#13A56B; background:#BFF6C3; } /* Task state ramp */ .text-bg-flg-stt-tsk-0 { color:#978D71; background:#EDECE6; } .text-bg-flg-stt-tsk-1 { color:#4978D8; background:#EDF5FF; } .text-bg-flg-stt-tsk-2 { color:#F31D2F; background:#FAD5D5; } .text-bg-flg-stt-tsk-9 { color:#13A56B; background:#BFF6C3; } /* Direction / flow ramp */ .text-bg-flg-dir-tsk-0 { color:#4978D8; background:#EDF5FF; } .text-bg-flg-dir-tsk-1 { color:#FAC502; background:#FFF9BD; } .text-bg-flg-dir-tsk-2 { color:#978D71; background:#EDECE6; } /* Boolean confirmation ramp */ .text-bg-flg-ctf-eml-0 { color:#F31D2F; background:#FAD5D5; } .text-bg-flg-ctf-eml-1 { color:#13A56B; background:#BFF6C3; } /* Disponibilita' articolo — FLG_DSP_GIA, valori ed etichette di Core.php:646. Mappatura e motivazioni in SYSTEM-DECISIONS §4.2. Il valore 0 usa lo slot ROSSO per decisione del committente (11.6.1): e' anche il colore che il legacy gli da' - `rosso.jpg` in `Core.php:649` - quindi la resa nuova torna alla semantica di dominio invece della lettura di §3.4.2 che avevo scelto io. La coppia e' quella della rampa cosi' com'e' (`flg-3`), non un rosso nuovo: vale l'eccezione di §3.2, che copre la rampa trovata e non le aggiunte. */ .text-bg-flg-dsp-gia-0 { color:#F34E5F; background:#FEE7E9; } .text-bg-flg-dsp-gia-1 { color:#E68B52; background:#FFF7ED; } .text-bg-flg-dsp-gia-2 { color:#E68B52; background:#FFF7ED; } .text-bg-flg-dsp-gia-3 { color:#E68B52; background:#FFF7ED; } .text-bg-flg-dsp-gia-4 { color:#9B7EBD; background:#EEE9F3; } .text-bg-flg-dsp-gia-5 { color:#4978D8; background:#EDF5FF; } .text-bg-flg-dsp-gia-9 { color:#13A56B; background:#BFF6C3; } /* Stato del preventivo - FLG_STT_PVT_ORI, le etichette sono DES_STT_PVT. Le coppie sono quelle della rampa generica (0 = flg-1, 1 = flg-2, 3 = flg-9, 4 = flg-3, S = flg-0). Fa eccezione «Da Approvare»: il giallo del sito e' la coppia di flg-dir-tsk-1, ma il suo testo #FAC502 misura 1,5:1 sul proprio fondo e non si legge; qui il testo e' lo stesso giallo scurito, 5,82:1. */ .text-bg-flg-stt-pvt-0 { color:#4978D8; background:#EDF5FF; } .text-bg-flg-stt-pvt-1 { color:#E68B52; background:#FFF7ED; } .text-bg-flg-stt-pvt-2 { color:#7A5C00; background:#FFF9BD; } .text-bg-flg-stt-pvt-3 { color:#13A56B; background:#BFF6C3; } .text-bg-flg-stt-pvt-4, .text-bg-flg-stt-pvt-N { color:var(--rg-flg-3-fg); background:var(--rg-flg-3-bg); } .text-bg-flg-stt-pvt-S { color:#978D71; background:#EDECE6; } /* Pratiche di reso — i tre flag che il legacy comprimeva in un solo fondo di riga (Stats.php:2725-2755). Ognuno porta la propria etichetta di dominio. */ .text-bg-flg-stt-arm-0 { color:#4978D8; background:#EDF5FF; } .text-bg-flg-stt-arm-1 { color:#13A56B; background:#BFF6C3; } .text-bg-flg-avz-arm-0 { color:#978D71; background:#EDECE6; } .text-bg-flg-avz-arm-1 { color:#4978D8; background:#EDF5FF; } .text-bg-flg-avz-arm-2 { color:#E68B52; background:#FFF7ED; } /* Ordine — FLG_AUZ_ARM e FLG_STT_ORD usano la scala booleana e quella generica: vedi SYSTEM-DECISIONS §4.2 per la tabella e per il ripiego sui valori ignoti. */ /* --rg-caption vale 4,25:1 sulla tinta di marchio e 4,3:1 sul fondo infossato: sotto il minimo. Su ogni superficie tinta la didascalia passa a --rg-label (§3.2). */ table.dataTable > tbody > tr.selected .subtitle, .card.selected .subtitle { color: var(--rg-label); } /* La compensazione per la riga sotto il puntatore vale solo dove il puntatore puo' passare: su un touch quella tinta non c'e' (vedi components.php, Parte 8.2/8.4), quindi non c'e' niente da compensare. */ @media (hover: hover) { .table-hover > tbody > tr:hover .subtitle { color: var(--rg-label); } }