matteoscrugli
8c4a555b88
Backend: - Add 2FA authentication with TOTP support - Add API keys management system - Add audit logging for security events - Add file upload/management system - Add notifications system with preferences - Add session management - Add webhooks integration - Add analytics endpoints - Add export functionality - Add password policy enforcement - Add new database migrations for core tables Frontend: - Add module position system (top/bottom sidebar sections) - Add search and notifications module configuration tabs - Add mobile logo replacing hamburger menu - Center page title absolutely when no tabs present - Align sidebar footer toggles with navigation items - Add lighter icon color in dark theme for mobile - Add API keys management page - Add notifications page with context - Add admin analytics and audit logs pages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Theme System
Sistema modulare per la gestione del tema dell'applicazione Service Name.
Struttura
theme/
├── colors.css # Palette colori (light/dark)
├── dimensions.css # Spacing, sizing, border radius, z-index
├── typography.css # Font sizes, weights, line heights
├── effects.css # Shadows, transitions, animations
├── index.css # Importa tutti i moduli
└── README.md # Questa documentazione
Come Usare
Modificare i Colori del Tema
Apri colors.css e modifica le variabili CSS:
:root {
--color-primary: #2d3748; /* Colore primario light theme */
--color-accent: #4c51bf; /* Colore accent */
/* ... */
}
[data-theme='dark'] {
--color-primary: #d1d5db; /* Colore primario dark theme */
/* ... */
}
Aggiungere un Nuovo Tema
- Aggiungi un nuovo selettore in
colors.css:
[data-theme='ocean'] {
--color-primary: #006994;
--color-accent: #0ea5e9;
--color-bg-main: #f0f9ff;
/* ... definisci tutti i colori ... */
}
- Modifica il context del tema per includere il nuovo tema nell'elenco
Modificare le Dimensioni
Apri dimensions.css:
:root {
--space-4: 1rem; /* Spacing base */
--sidebar-width: 260px; /* Larghezza sidebar */
--height-nav-item: 40px; /* Altezza nav items */
/* ... */
}
Modificare la Tipografia
Apri typography.css:
:root {
--text-base: 0.875rem; /* Dimensione testo base */
--weight-medium: 500; /* Peso font medio */
/* ... */
}
Modificare Effetti e Transizioni
Apri effects.css:
:root {
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--transition-slow: 0.3s ease;
/* ... */
}
Convenzioni
Naming
- Usa prefissi descrittivi:
--color-,--space-,--text-,--shadow- - Usa scala numerica per dimensioni:
-sm,-md,-lg,-xl - Usa nomi semantici per colori:
primary,accent,success,error
Valori
- Spacing basato su multipli di 4px (0.25rem)
- Colori in formato esadecimale (#rrggbb)
- Dimensioni in rem/px dove appropriato
- Transizioni sempre con easing function
Esempi d'Uso nei Componenti
/* Sidebar.css */
.sidebar {
width: var(--sidebar-width);
background: var(--color-bg-sidebar);
box-shadow: var(--shadow-lg);
}
.nav-item {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
transition: var(--transition);
}
.nav-label {
font-size: var(--text-md);
font-weight: var(--weight-medium);
color: var(--color-text-inverse);
}
Vantaggi
✅ Centralizzato: Tutti i valori in un posto ✅ Consistente: Stessa palette ovunque ✅ Manutenibile: Facile cambiare tema ✅ Scalabile: Aggiungi nuovi temi facilmente ✅ Type-safe: Le variabili CSS prevengono errori ✅ Performance: Cambio tema istantaneo (solo CSS)