Initial commit

frontend/src/styles/theme/README.md

@@ -0,0 +1,133 @@
+# 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:
+
+```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
+
+1. Aggiungi un nuovo selettore in `colors.css`:
+
+```css
+[data-theme='ocean'] {
+  --color-primary: #006994;
+  --color-accent: #0ea5e9;
+  --color-bg-main: #f0f9ff;
+  /* ... definisci tutti i colori ... */
+}
+```
+
+2. Modifica il context del tema per includere il nuovo tema nell'elenco
+
+### Modificare le Dimensioni
+
+Apri `dimensions.css`:
+
+```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`:
+
+```css
+:root {
+  --text-base: 0.875rem;        /* Dimensione testo base */
+  --weight-medium: 500;         /* Peso font medio */
+  /* ... */
+}
+```
+
+### Modificare Effetti e Transizioni
+
+Apri `effects.css`:
+
+```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
+
+```css
+/* 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)

frontend/src/styles/theme/colors.css

@@ -0,0 +1,67 @@
+/* ==========================================
+   THEME COLORS
+   ========================================== */
+
+:root {
+  /* Light Theme - Primary Colors */
+  --color-primary: #2d3748;
+  --color-primary-hover: #1a202c;
+  --color-secondary: #4a5568;
+  --color-accent: #4c51bf;
+  --color-accent-rgb: 76, 81, 191;
+  --color-accent-hover: #4338ca;
+
+  /* Light Theme - Background Colors */
+  --color-bg-main: #f7fafc;
+  --color-bg-card: #ffffff;
+  --color-bg-elevated: #f8fafc;
+  --color-bg-sidebar: #2d3748;
+
+  /* Light Theme - Text Colors */
+  --color-text-primary: #1a202c;
+  --color-text-secondary: #374151;
+  --color-text-muted: #6b7280;
+  --color-text-inverse: #ffffff;
+
+  /* Light Theme - Border Colors */
+  --color-border: #e5e7eb;
+  --color-border-hover: #d1d5db;
+
+  /* Semantic Colors (same for both themes) */
+  --color-success: #059669;
+  --color-error: #dc2626;
+  --color-warning: #d97706;
+  --color-info: #0284c7;
+}
+
+[data-theme='dark'] {
+  /* Dark Theme - Primary Colors */
+  --color-primary: #d1d5db;
+  --color-primary-hover: #f3f4f6;
+  --color-secondary: #9ca3af;
+  --color-accent: #3d3f9e;
+  --color-accent-rgb: 61, 63, 158;
+  --color-accent-hover: #4e50b2;
+
+  /* Dark Theme - Background Colors */
+  --color-bg-main: #0f172a;
+  --color-bg-card: #1e293b;
+  --color-bg-elevated: #334155;
+  --color-bg-sidebar: #0c1222;
+
+  /* Dark Theme - Text Colors */
+  --color-text-primary: #f1f5f9;
+  --color-text-secondary: #cbd5e1;
+  --color-text-muted: #94a3b8;
+  --color-text-inverse: #ffffff;
+
+  /* Dark Theme - Border Colors */
+  --color-border: #334155;
+  --color-border-hover: #475569;
+
+  /* Semantic Colors */
+  --color-success: #10b981;
+  --color-error: #ef4444;
+  --color-warning: #f59e0b;
+  --color-info: #06b6d4;
+}

frontend/src/styles/theme/dimensions.css

@@ -0,0 +1,154 @@
+/* ==========================================
+   DIMENSIONS & SPACING
+   ========================================== */
+
+:root {
+  /* Spacing Scale (based on 0.25rem = 4px) */
+  --space-0: 0;
+  --space-1: 0.25rem;
+  /* 4px */
+  --space-2: 0.5rem;
+  /* 8px */
+  --space-3: 0.75rem;
+  /* 12px */
+  --space-4: 1rem;
+  /* 16px */
+  --space-5: 1.25rem;
+  /* 20px */
+  --space-6: 1.5rem;
+  /* 24px */
+  --space-8: 2rem;
+  /* 32px */
+  --space-10: 2.5rem;
+  /* 40px */
+  --space-12: 3rem;
+  /* 48px */
+  --space-16: 4rem;
+  /* 64px */
+  --space-20: 5rem;
+  /* 80px */
+
+  /* Border Radius */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-full: 9999px;
+
+  /* Component Heights */
+  --height-button: 36px;
+  --height-input: 40px;
+  --height-nav-item: 40px;
+  --height-header: 70px;
+
+  /* Sidebar Dimensions */
+  /* Sidebar is positioned at left: 1rem (16px) with these widths */
+  /* margin-left = left offset (16px) + sidebar width */
+  --sidebar-width: 276px;
+  /* 16px offset + 260px width */
+  --sidebar-width-collapsed: 96px;
+  /* 16px offset + 80px width */
+  --sidebar-mobile-width: 280px;
+
+  /* Page Layout Spacing */
+  --page-padding-x: 2rem;
+  /* Horizontal padding for page content */
+  --page-padding-y: 2rem;
+  /* Vertical padding for page content */
+  --page-padding-x-tablet: 1.5rem;
+  --page-padding-y-tablet: 1.5rem;
+  --page-padding-x-mobile: 1rem;
+  --page-padding-y-mobile: 1rem;
+  --page-max-width: 1400px;
+  /* Maximum content width */
+
+  /* Container Widths */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+
+  /* Z-index Scale */
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-fixed: 300;
+  --z-modal-backdrop: 1000;
+  --z-modal: 1001;
+  --z-popover: 1002;
+  --z-tooltip: 1003;
+
+  /* Icon Sizes */
+  --icon-xs: 16px;
+  --icon-sm: 18px;
+  --icon-md: 20px;
+  --icon-lg: 24px;
+  --icon-xl: 32px;
+
+  /* Button Sizes */
+  --btn-padding-sm: 0.5rem 1rem;
+  --btn-padding-md: 0.625rem 1.25rem;
+  --btn-font-size: 0.95rem;
+  --btn-font-size-sm: 0.875rem;
+  --btn-height: 36px;
+  --btn-height-sm: 32px;
+
+  /* Icon Button Sizes */
+  --btn-icon-sm: 32px;
+  --btn-icon-md: 36px;
+  --btn-icon-lg: 48px;
+
+  /* Badge Sizes */
+  --badge-padding: 0.25rem 0.625rem;
+  --badge-font-size: 0.8rem;
+
+  /* Semantic Spacing - Cards & Containers */
+  --card-padding: 0.875rem;
+  /* Reduced from 1rem */
+  --card-padding-sm: 0.625rem;
+  /* Reduced from 0.75rem */
+  --card-gap: 0.625rem;
+  /* Reduced from 0.75rem */
+  --card-gap-lg: 0.875rem;
+  /* Reduced from 1rem */
+
+  /* Semantic Spacing - Sections */
+  --section-gap: 1.25rem;
+  /* Reduced from 1.5rem */
+  --section-gap-sm: 0.875rem;
+  /* Reduced from 1rem */
+
+  /* Semantic Spacing - Elements */
+  --element-gap: 0.375rem;
+  /* Reduced from 0.5rem */
+  --element-gap-sm: 0.25rem;
+  /* Kept same */
+  --element-gap-lg: 0.625rem;
+  /* Reduced from 0.75rem */
+
+  /* Semantic Spacing - Toolbar & Header */
+  --toolbar-gap: 0.625rem;
+  /* Reduced from 0.75rem */
+  --toolbar-padding: 0.75rem;
+  /* Reduced from 1rem */
+
+  /* Semantic Spacing - Table */
+  --table-cell-padding: 0.625rem 0.875rem;
+  /* Reduced from 0.75rem 1rem */
+  --table-cell-padding-sm: 0.5rem 0.75rem;
+  /* Kept same */
+
+  /* Tab Sizes */
+  --tab-padding: 0.625rem 1rem;
+  /* Reduced from 0.75rem 1.25rem */
+  --tab-font-size: 0.95rem;
+
+  /* Input Sizes */
+  --input-padding: 0.625rem 0.875rem;
+  /* Reduced from 0.75rem 1rem */
+  --input-font-size: 0.95rem;
+
+  /* Breakpoints (for reference in media queries) */
+  --breakpoint-mobile: 768px;
+  --breakpoint-tablet: 1024px;
+  --breakpoint-desktop: 1280px;
+}

frontend/src/styles/theme/effects.css

@@ -0,0 +1,46 @@
+/* ==========================================
+   EFFECTS (Shadows, Transitions, Animations)
+   ========================================== */
+
+:root {
+  /* Box Shadows */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
+  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
+
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+  --transition-base: 0.2s ease;
+  --transition-slow: 0.3s ease;
+  --transition-slower: 0.5s ease;
+
+  /* Transition Properties */
+  --transition: all 0.2s ease;
+  --transition-colors: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+  --transition-transform: transform 0.2s ease;
+  --transition-opacity: opacity 0.2s ease;
+
+  /* Animation Durations */
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 500ms;
+
+  /* Easing Functions */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+[data-theme='dark'] {
+  /* Dark Theme - Stronger Shadows */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
+  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7);
+}

frontend/src/styles/theme/index.css

@@ -0,0 +1,105 @@
+/* ==========================================
+   THEME SYSTEM
+   Import all theme variables
+   ========================================== */
+
+/* Import theme modules */
+@import './colors.css';
+@import './dimensions.css';
+@import './typography.css';
+@import './effects.css';
+
+/* Import layout system */
+@import '../Layout.css';
+
+/* Global Styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  font-family: var(--font-sans);
+  background: var(--color-bg-main);
+  color: var(--color-text-primary);
+  transition: background-color var(--transition-slow), color var(--transition-slow);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Utility for selectable text */
+.selectable {
+  user-select: text;
+  -webkit-user-select: text;
+  cursor: text;
+}
+
+#root {
+  min-height: 100vh;
+  width: 100%;
+}
+
+/* Links */
+a {
+  font-weight: var(--weight-medium);
+  color: var(--color-accent);
+  text-decoration: inherit;
+  transition: var(--transition-colors);
+}
+
+a:hover {
+  color: var(--color-accent-hover);
+}
+
+/* Buttons */
+button {
+  border-radius: var(--radius-lg);
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: var(--weight-medium);
+  font-family: inherit;
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+button:focus,
+button:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+/* Loading state */
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  font-size: var(--text-3xl);
+  color: var(--color-accent);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-bg-main);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-hover);
+}

frontend/src/styles/theme/typography.css

@@ -0,0 +1,42 @@
+/* ==========================================
+   TYPOGRAPHY
+   ========================================== */
+
+:root {
+  /* Font Families */
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --font-mono: 'Fira Code', 'Courier New', monospace;
+
+  /* Font Sizes */
+  --text-xs: 0.7rem;      /* 11.2px */
+  --text-sm: 0.75rem;     /* 12px */
+  --text-base: 0.875rem;  /* 14px */
+  --text-md: 0.95rem;     /* 15.2px */
+  --text-lg: 1rem;        /* 16px */
+  --text-xl: 1.125rem;    /* 18px */
+  --text-2xl: 1.25rem;    /* 20px */
+  --text-3xl: 1.5rem;     /* 24px */
+  --text-4xl: 2rem;       /* 32px */
+  --text-5xl: 2.5rem;     /* 40px */
+
+  /* Font Weights */
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  /* Line Heights */
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.75;
+  --leading-loose: 2;
+
+  /* Letter Spacing */
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+  --tracking-widest: 0.1em;
+}