/* ============================================================================= SkeePass — assets/css/tokens.css UNICA fonte di verità dei valori del design system (Fase 7). - Tema scuro di default su :root; tema chiaro sotto :root[data-theme="light"]. Gli stessi blocchi valgono anche per [data-theme="dark"] / [data-theme="light"] su un elemento qualsiasi, così una porzione di pagina (styleguide, anteprime) può mostrare l'altro tema senza toccare la radice. - Nessun font esterno: stack di sistema. - Breakpoint (non esprimibili come custom property, li usano layout.css e components.css): 1100px split lista/dettaglio → drawer; 900px sidebar off-canvas e form a schermo intero; 640px barra superiore compatta. CONTRASTO (WCAG 2.x, rapporto sulla luminanza relativa; calcolo verificato con uno script sulla palette qui sotto, soglia 4.5:1 per il testo normale). Gli sfondi "soft" sono traslucidi: il rapporto è calcolato sul colore composto sopra surface e surface-raised. TEMA SCURO bg surface raised overlay testo primario #f2f2fa 16.7 15.2 13.7 12.3 testo secondario #b6b6cf 9.4 8.6 7.7 6.9 testo attenuato #9494b3 6.3 5.8 5.2 4.7 accento (testo) #dddc00 12.7 11.6 10.4 9.3 success #4cd98a 10.3 9.4 8.4 7.6 warning #ffc266 11.7 10.6 9.6 8.6 danger #ff7383 7.1 6.5 5.9 5.2 info #6fb4ff 8.5 7.8 7.0 6.3 testo scuro #1b1b2a su accento #dddc00 11.6 · su hover #e8e733 12.9 · su active #c6c500 9.2 testo su sfondo soft (surface / raised): accento 8.4 / 7.5 · success 6.8 / 6.0 warning 7.4 / 6.6 · danger 5.1 / 4.5 · info 5.8 / 5.1 chip tipi password (testo su sfondo soft, surface / raised / overlay): 1 viola #b4a2ff 5.7 / 5.1 / 4.6 2 blu #7fb6ff 5.9 / 5.3 / 4.8 3 ciano #5fd3e6 6.9 / 6.1 / 5.5 4 verde #6fdc9c 7.0 / 6.3 / 5.7 5 arancio #ffa36b 6.3 / 5.7 / 5.1 6 rosa #ff8fb8 5.9 / 5.3 / 4.7 7 rosso #ff8a94 5.6 / 5.1 / 4.6 8 grigio #b3b8d0 6.2 / 5.5 / 5.0 anello di focus #dddc00 su bg 12.7, su surface 11.6 (minimo 3:1 per la grafica) TEMA CHIARO bg surface raised overlay testo primario #1b1b2a 15.4 17.0 15.9 17.0 testo secondario #4d4d66 7.4 8.2 7.6 8.2 testo attenuato #66667f 5.0 5.6 5.2 5.6 accento (testo) #6b6a00 5.1 5.7 5.3 5.7 success #17704a 5.5 6.1 5.7 6.1 warning #8f5c00 5.1 5.7 5.3 5.7 danger #bf2434 5.4 6.0 5.6 6.0 info #1f66c4 5.1 5.6 5.2 5.6 testo scuro #1b1b2a su accento #dddc00 11.6 · su hover #d0cf00 10.2 · su active #bfbe00 8.6 testo su sfondo soft (surface / raised): accento 5.3 / 5.0 · success 5.3 / 5.0 warning 5.0 / 4.7 · danger 5.1 / 4.8 · info 4.9 / 4.5 chip tipi password (testo su sfondo soft, surface / raised / overlay): 1 viola #5a3fd0 5.7 / 5.4 / 5.7 2 blu #1f5fc4 5.1 / 4.8 / 5.1 3 ciano #086b7d 5.2 / 4.8 / 5.2 4 verde #157040 5.2 / 4.9 / 5.2 5 arancio #a04f00 4.9 / 4.6 / 4.9 6 rosa #ab2b60 5.4 / 5.0 / 5.4 7 rosso #b72734 5.2 / 4.8 / 5.2 8 grigio #555a72 5.7 / 5.4 / 5.7 anello di focus #6b6a00 su bg 5.1, su surface 5.7 Tutte le coppie testo/sfondo superano 4.5:1 in entrambi i temi. I bordi (1.2–2.0:1) sono decorativi: la separazione delle superfici è affidata anche al cambio di tonalità, mai al solo bordo. ACCENTO #dddc00 (giallo Springo). È chiaro: il testo sopra l'accento è sempre scuro (#1b1b2a) e il colore d'accento per i TESTI nel tema chiaro è l'oliva #6b6a00, perché il giallo pieno su bianco vale 1.5:1. Nel tema chiaro il bottone primario ha anche un bordo scuro traslucido (--color-accent-border) per staccare dal bianco. Le varianti: hover più chiara nel tema scuro e più scura in quello chiaro, active sempre più scura. ============================================================================= */ :root, [data-theme="dark"] { color-scheme: dark; /* Superfici (4 livelli) */ --color-bg: #12121c; --color-surface: #1b1b2a; --color-surface-raised: #23233a; --color-overlay: #2b2b45; /* Testo (3 livelli + testo su accento) */ --color-text: #f2f2fa; --color-text-secondary: #b6b6cf; --color-text-muted: #9494b3; /* Testo sopra l'accento: il giallo è chiaro, il testo è scuro (11.6:1) */ --color-text-on-accent: #1b1b2a; /* Testo sopra uno sfondo pieno "danger" (#ff7383 è chiaro: serve testo scuro, 6.4:1) */ --color-text-on-danger: #1b1b2a; /* Bordi (2 livelli) */ --color-border: #2f2f4a; --color-border-strong: #4a4a72; /* Accento primario (giallo Springo) e varianti */ --color-accent: #dddc00; --color-accent-hover: #e8e733; --color-accent-active: #c6c500; --color-accent-soft: rgba(221, 220, 0, 0.14); --color-accent-text: #dddc00; --color-accent-border: transparent; /* Semantici (testo/icona) e relativi sfondi soft */ --color-success: #4cd98a; --color-success-soft: rgba(76, 217, 138, 0.16); --color-warning: #ffc266; --color-warning-soft: rgba(255, 194, 102, 0.16); --color-danger: #ff7383; --color-danger-soft: rgba(255, 115, 131, 0.16); --color-info: #6fb4ff; --color-info-soft: rgba(111, 180, 255, 0.16); /* Interazione e superfici di servizio */ --color-hover: rgba(255, 255, 255, 0.045); --color-selected: var(--color-accent-soft); --color-backdrop: rgba(6, 6, 14, 0.62); --color-skeleton: #262640; --color-skeleton-shine: rgba(255, 255, 255, 0.07); --color-mark: rgba(255, 194, 102, 0.32); --color-tooltip-bg: #3a3a5a; --color-tooltip-text: #f2f2fa; --color-switch-off: #4a4a72; /* Chip dei tipi password: 8 varianti (testo + sfondo soft) */ --chip-1-fg: #b4a2ff; --chip-1-bg: rgba(180, 162, 255, 0.16); --chip-2-fg: #7fb6ff; --chip-2-bg: rgba(127, 182, 255, 0.16); --chip-3-fg: #5fd3e6; --chip-3-bg: rgba(95, 211, 230, 0.16); --chip-4-fg: #6fdc9c; --chip-4-bg: rgba(111, 220, 156, 0.16); --chip-5-fg: #ffa36b; --chip-5-bg: rgba(255, 163, 107, 0.16); --chip-6-fg: #ff8fb8; --chip-6-bg: rgba(255, 143, 184, 0.16); --chip-7-fg: #ff8a94; --chip-7-bg: rgba(255, 138, 148, 0.16); --chip-8-fg: #b3b8d0; --chip-8-bg: rgba(179, 184, 208, 0.16); /* Tipografia */ --font-sans: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --leading-tight: 1.25; --leading-normal: 1.5; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Spaziatura su base 4px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Raggi */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 999px; /* Ombre */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5); /* Z-index nominati (dal più basso al più alto) */ --z-sticky: 50; --z-dropdown: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; /* Movimento */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Dimensioni di layout e controlli */ --topbar-h: 56px; --sidebar-w: 240px; --sidebar-rail-w: 64px; --footer-h: 28px; --pane-head-h: 52px; --row-h: 44px; --search-max-w: 640px; --detail-w: 520px; --control-height: 40px; --control-height-sm: 32px; --control-height-lg: 48px; /* Focus */ --focus-ring-color: var(--color-accent-text); --focus-ring: 2px solid var(--focus-ring-color); --focus-ring-offset: 2px; /* Decorazioni specifiche */ --glow-accent: rgba(221, 220, 0, 0.20); --glow-info: rgba(111, 180, 255, 0.10); /* Icone dei controlli nativi (select, date): colore = testo attenuato */ --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239494b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --date-icon-filter: invert(0.75); } :root[data-theme="light"], [data-theme="light"] { color-scheme: light; --color-bg: #f3f3f8; --color-surface: #ffffff; --color-surface-raised: #f7f7fb; --color-overlay: #ffffff; --color-text: #1b1b2a; --color-text-secondary: #4d4d66; --color-text-muted: #66667f; --color-text-on-accent: #1b1b2a; /* testo scuro sul giallo: 11.6:1 */ --color-text-on-danger: #ffffff; /* bianco su #bf2434: 7.5:1 */ --color-border: #e1e1ec; --color-border-strong: #bdbdd2; --color-accent: #dddc00; --color-accent-hover: #d0cf00; --color-accent-active: #bfbe00; --color-accent-soft: rgba(221, 220, 0, 0.18); --color-accent-text: #6b6a00; /* oliva: il giallo pieno su bianco vale solo 1.5:1 */ --color-accent-border: rgba(27, 27, 42, 0.14); --color-success: #17704a; --color-success-soft: rgba(23, 112, 74, 0.10); --color-warning: #8f5c00; --color-warning-soft: rgba(143, 92, 0, 0.10); --color-danger: #bf2434; --color-danger-soft: rgba(191, 36, 52, 0.10); --color-info: #1f66c4; --color-info-soft: rgba(31, 102, 196, 0.10); --color-hover: rgba(20, 20, 40, 0.045); --color-selected: var(--color-accent-soft); --color-backdrop: rgba(20, 20, 40, 0.42); --color-skeleton: #e8e8f0; --color-skeleton-shine: rgba(255, 255, 255, 0.7); --color-mark: rgba(255, 194, 102, 0.55); --color-tooltip-bg: #2b2b3f; --color-tooltip-text: #ffffff; --color-switch-off: #bdbdd2; --chip-1-fg: #5a3fd0; --chip-1-bg: rgba(90, 63, 208, 0.12); --chip-2-fg: #1f5fc4; --chip-2-bg: rgba(31, 95, 196, 0.12); --chip-3-fg: #086b7d; --chip-3-bg: rgba(8, 107, 125, 0.12); --chip-4-fg: #157040; --chip-4-bg: rgba(21, 112, 64, 0.12); --chip-5-fg: #a04f00; --chip-5-bg: rgba(160, 79, 0, 0.12); --chip-6-fg: #ab2b60; --chip-6-bg: rgba(171, 43, 96, 0.12); --chip-7-fg: #b72734; --chip-7-bg: rgba(183, 39, 52, 0.12); --chip-8-fg: #555a72; --chip-8-bg: rgba(85, 90, 114, 0.12); --shadow-sm: 0 1px 2px rgba(20, 20, 40, 0.08); --shadow-md: 0 6px 20px rgba(20, 20, 40, 0.10); --shadow-lg: 0 20px 50px rgba(20, 20, 40, 0.16); --glow-accent: rgba(221, 220, 0, 0.26); --glow-info: rgba(31, 102, 196, 0.06); --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366667f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --date-icon-filter: none; }