michele/netgescon-day0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
a1387986ea
netgescon-day0/docs/90-UI-interfaccia-unica/06-DESIGN-SYSTEM.md

29 KiB
Executable File
Raw Blame History

🎨 DESIGN SYSTEM - Documentazione Completa NetGescon

Sistema di Design dell'interfaccia universale
📅 Creato: 21/07/2025
🔄 Ultimo aggiornamento: 21/07/2025
🎯 Priorità: ⚡ ALTO

📋 OVERVIEW DESIGN SYSTEM

Il Design System NetGescon fornisce LINEE GUIDA UNIFICATE per:

  • 🎨 Palette Colori
  • 📝 Typography System
  • 📏 Spacing & Layout
  • 🔘 Button Styles
  • 📋 Form Elements
  • 📊 Data Visualization
  • 🎭 Icons & Graphics

🎯 Design Philosophy

  • Consistenza - Ogni elemento segue le stesse regole
  • Scalabilità - Facilmente estendibile e mantenibile
  • Accessibilità - WCAG 2.1 AA compliant
  • Performance - Ottimizzato per velocità e fluidità

🌈 PALETTE COLORI

🎨 CSS Variables System

/* /public/css/design-system/colors.css */

:root {
    /* === PRIMARY COLORS === */
    --netgescon-primary: #2563eb;          /* Blue 600 */
    --netgescon-primary-light: #3b82f6;    /* Blue 500 */
    --netgescon-primary-dark: #1d4ed8;     /* Blue 700 */
    --netgescon-primary-50: #eff6ff;       /* Blue 50 */
    --netgescon-primary-100: #dbeafe;      /* Blue 100 */
    --netgescon-primary-200: #bfdbfe;      /* Blue 200 */
    
    /* === SECONDARY COLORS === */
    --netgescon-secondary: #64748b;        /* Slate 500 */
    --netgescon-secondary-light: #94a3b8;  /* Slate 400 */
    --netgescon-secondary-dark: #475569;   /* Slate 600 */
    
    /* === SEMANTIC COLORS === */
    --netgescon-success: #16a34a;          /* Green 600 */
    --netgescon-success-light: #22c55e;    /* Green 500 */
    --netgescon-success-dark: #15803d;     /* Green 700 */
    --netgescon-success-50: #f0fdf4;       /* Green 50 */
    
    --netgescon-warning: #d97706;          /* Orange 600 */
    --netgescon-warning-light: #f59e0b;    /* Orange 500 */
    --netgescon-warning-dark: #b45309;     /* Orange 700 */
    --netgescon-warning-50: #fffbeb;       /* Orange 50 */
    
    --netgescon-danger: #dc2626;           /* Red 600 */
    --netgescon-danger-light: #ef4444;     /* Red 500 */
    --netgescon-danger-dark: #b91c1c;      /* Red 700 */
    --netgescon-danger-50: #fef2f2;        /* Red 50 */
    
    --netgescon-info: #0891b2;             /* Cyan 600 */
    --netgescon-info-light: #06b6d4;       /* Cyan 500 */
    --netgescon-info-dark: #0e7490;        /* Cyan 700 */
    --netgescon-info-50: #ecfeff;          /* Cyan 50 */
    
    /* === NEUTRAL COLORS === */
    --netgescon-white: #ffffff;
    --netgescon-gray-50: #f8fafc;
    --netgescon-gray-100: #f1f5f9;
    --netgescon-gray-200: #e2e8f0;
    --netgescon-gray-300: #cbd5e1;
    --netgescon-gray-400: #94a3b8;
    --netgescon-gray-500: #64748b;
    --netgescon-gray-600: #475569;
    --netgescon-gray-700: #334155;
    --netgescon-gray-800: #1e293b;
    --netgescon-gray-900: #0f172a;
    --netgescon-black: #000000;
    
    /* === GRADIENTS === */
    --netgescon-gradient-primary: linear-gradient(135deg, var(--netgescon-primary-light) 0%, var(--netgescon-primary) 100%);
    --netgescon-gradient-success: linear-gradient(135deg, var(--netgescon-success-light) 0%, var(--netgescon-success) 100%);
    --netgescon-gradient-warning: linear-gradient(135deg, var(--netgescon-warning-light) 0%, var(--netgescon-warning) 100%);
    --netgescon-gradient-danger: linear-gradient(135deg, var(--netgescon-danger-light) 0%, var(--netgescon-danger) 100%);
    
    /* === SHADOWS === */
    --netgescon-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --netgescon-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --netgescon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --netgescon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --netgescon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* === BORDERS === */
    --netgescon-border-radius: 8px;
    --netgescon-border-radius-sm: 4px;
    --netgescon-border-radius-md: 6px;
    --netgescon-border-radius-lg: 12px;
    --netgescon-border-radius-xl: 16px;
    --netgescon-border-radius-full: 9999px;
}

🎨 Color Usage Guide

/* Primary - Per azioni principali */
.btn-primary { background-color: var(--netgescon-primary); }
.text-primary { color: var(--netgescon-primary); }
.border-primary { border-color: var(--netgescon-primary); }

/* Success - Per conferme e successi */
.alert-success { background-color: var(--netgescon-success-50); color: var(--netgescon-success-dark); }
.icon-success { color: var(--netgescon-success); }

/* Warning - Per avvisi e attenzioni */
.alert-warning { background-color: var(--netgescon-warning-50); color: var(--netgescon-warning-dark); }
.badge-warning { background-color: var(--netgescon-warning); }

/* Danger - Per errori e azioni distruttive */
.btn-danger { background-color: var(--netgescon-danger); }
.text-danger { color: var(--netgescon-danger); }

/* Neutral - Per testi e backgrounds */
.bg-gray-50 { background-color: var(--netgescon-gray-50); }
.text-gray-900 { color: var(--netgescon-gray-900); }
.border-gray-200 { border-color: var(--netgescon-gray-200); }

📝 TYPOGRAPHY SYSTEM

⚡ Font Configuration

/* /public/css/design-system/typography.css */

/* === FONT FAMILIES === */
:root {
    --netgescon-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --netgescon-font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Liberation Mono', Menlo, Monaco, 'Courier New', monospace;
}

/* === FONT SIZES === */
:root {
    --netgescon-text-xs: 0.75rem;      /* 12px */
    --netgescon-text-sm: 0.875rem;     /* 14px */
    --netgescon-text-base: 1rem;       /* 16px */
    --netgescon-text-lg: 1.125rem;     /* 18px */
    --netgescon-text-xl: 1.25rem;      /* 20px */
    --netgescon-text-2xl: 1.5rem;      /* 24px */
    --netgescon-text-3xl: 1.875rem;    /* 30px */
    --netgescon-text-4xl: 2.25rem;     /* 36px */
    --netgescon-text-5xl: 3rem;        /* 48px */
    --netgescon-text-6xl: 4rem;        /* 64px */
}

/* === FONT WEIGHTS === */
:root {
    --netgescon-font-thin: 100;
    --netgescon-font-light: 300;
    --netgescon-font-normal: 400;
    --netgescon-font-medium: 500;
    --netgescon-font-semibold: 600;
    --netgescon-font-bold: 700;
    --netgescon-font-extrabold: 800;
    --netgescon-font-black: 900;
}

/* === LINE HEIGHTS === */
:root {
    --netgescon-leading-none: 1;
    --netgescon-leading-tight: 1.25;
    --netgescon-leading-snug: 1.375;
    --netgescon-leading-normal: 1.5;
    --netgescon-leading-relaxed: 1.625;
    --netgescon-leading-loose: 2;
}

📖 Typography Classes

/* === HEADINGS === */
.netgescon-h1 {
    font-size: var(--netgescon-text-4xl);
    font-weight: var(--netgescon-font-bold);
    line-height: var(--netgescon-leading-tight);
    color: var(--netgescon-gray-900);
    margin-bottom: 1.5rem;
}

.netgescon-h2 {
    font-size: var(--netgescon-text-3xl);
    font-weight: var(--netgescon-font-semibold);
    line-height: var(--netgescon-leading-tight);
    color: var(--netgescon-gray-900);
    margin-bottom: 1.25rem;
}

.netgescon-h3 {
    font-size: var(--netgescon-text-2xl);
    font-weight: var(--netgescon-font-semibold);
    line-height: var(--netgescon-leading-snug);
    color: var(--netgescon-gray-900);
    margin-bottom: 1rem;
}

.netgescon-h4 {
    font-size: var(--netgescon-text-xl);
    font-weight: var(--netgescon-font-medium);
    line-height: var(--netgescon-leading-snug);
    color: var(--netgescon-gray-900);
    margin-bottom: 0.75rem;
}

/* === BODY TEXT === */
.netgescon-body {
    font-size: var(--netgescon-text-base);
    font-weight: var(--netgescon-font-normal);
    line-height: var(--netgescon-leading-relaxed);
    color: var(--netgescon-gray-700);
}

.netgescon-body-sm {
    font-size: var(--netgescon-text-sm);
    font-weight: var(--netgescon-font-normal);
    line-height: var(--netgescon-leading-normal);
    color: var(--netgescon-gray-600);
}

.netgescon-body-lg {
    font-size: var(--netgescon-text-lg);
    font-weight: var(--netgescon-font-normal);
    line-height: var(--netgescon-leading-relaxed);
    color: var(--netgescon-gray-700);
}

/* === SPECIAL TEXT === */
.netgescon-label {
    font-size: var(--netgescon-text-sm);
    font-weight: var(--netgescon-font-medium);
    line-height: var(--netgescon-leading-normal);
    color: var(--netgescon-gray-700);
    display: block;
    margin-bottom: 0.5rem;
}

.netgescon-caption {
    font-size: var(--netgescon-text-xs);
    font-weight: var(--netgescon-font-normal);
    line-height: var(--netgescon-leading-normal);
    color: var(--netgescon-gray-500);
}

.netgescon-code {
    font-family: var(--netgescon-font-family-mono);
    font-size: var(--netgescon-text-sm);
    background-color: var(--netgescon-gray-100);
    padding: 0.125rem 0.25rem;
    border-radius: var(--netgescon-border-radius-sm);
    color: var(--netgescon-gray-800);
}

📏 SPACING & LAYOUT

📐 Spacing Scale

/* /public/css/design-system/spacing.css */

:root {
    /* === SPACING SCALE === */
    --netgescon-space-0: 0;
    --netgescon-space-px: 1px;
    --netgescon-space-0-5: 0.125rem;    /* 2px */
    --netgescon-space-1: 0.25rem;       /* 4px */
    --netgescon-space-1-5: 0.375rem;    /* 6px */
    --netgescon-space-2: 0.5rem;        /* 8px */
    --netgescon-space-2-5: 0.625rem;    /* 10px */
    --netgescon-space-3: 0.75rem;       /* 12px */
    --netgescon-space-3-5: 0.875rem;    /* 14px */
    --netgescon-space-4: 1rem;          /* 16px */
    --netgescon-space-5: 1.25rem;       /* 20px */
    --netgescon-space-6: 1.5rem;        /* 24px */
    --netgescon-space-7: 1.75rem;       /* 28px */
    --netgescon-space-8: 2rem;          /* 32px */
    --netgescon-space-9: 2.25rem;       /* 36px */
    --netgescon-space-10: 2.5rem;       /* 40px */
    --netgescon-space-12: 3rem;         /* 48px */
    --netgescon-space-16: 4rem;         /* 64px */
    --netgescon-space-20: 5rem;         /* 80px */
    --netgescon-space-24: 6rem;         /* 96px */
    --netgescon-space-32: 8rem;         /* 128px */
    
    /* === LAYOUT CONSTANTS === */
    --netgescon-header-height: 70px;
    --netgescon-footer-height: 70px;
    --netgescon-sidebar-width: 280px;
    --netgescon-sidebar-collapsed-width: 70px;
    --netgescon-container-max-width: 1280px;
}

🏗️ Layout Utilities

/* === CONTAINER === */
.netgescon-container {
    width: 100%;
    max-width: var(--netgescon-container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--netgescon-space-4);
    padding-right: var(--netgescon-space-4);
}

/* === FLEXBOX UTILITIES === */
.netgescon-flex {
    display: flex;
}

.netgescon-flex-col {
    flex-direction: column;
}

.netgescon-flex-wrap {
    flex-wrap: wrap;
}

.netgescon-items-center {
    align-items: center;
}

.netgescon-items-start {
    align-items: flex-start;
}

.netgescon-items-end {
    align-items: flex-end;
}

.netgescon-justify-center {
    justify-content: center;
}

.netgescon-justify-between {
    justify-content: space-between;
}

.netgescon-justify-start {
    justify-content: flex-start;
}

.netgescon-justify-end {
    justify-content: flex-end;
}

/* === GRID UTILITIES === */
.netgescon-grid {
    display: grid;
}

.netgescon-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.netgescon-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.netgescon-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.netgescon-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.netgescon-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.netgescon-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.netgescon-gap-1 { gap: var(--netgescon-space-1); }
.netgescon-gap-2 { gap: var(--netgescon-space-2); }
.netgescon-gap-3 { gap: var(--netgescon-space-3); }
.netgescon-gap-4 { gap: var(--netgescon-space-4); }
.netgescon-gap-6 { gap: var(--netgescon-space-6); }
.netgescon-gap-8 { gap: var(--netgescon-space-8); }

🔘 BUTTON SYSTEM

🎨 Button Base Styles

/* /public/css/design-system/buttons.css */

.btn {
    /* Base button styles */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--netgescon-border-radius);
    font-weight: var(--netgescon-font-medium);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    
    /* Size defaults */
    padding: var(--netgescon-space-2-5) var(--netgescon-space-4);
    font-size: var(--netgescon-text-sm);
    line-height: 1.25;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* === BUTTON SIZES === */
.btn-xs {
    padding: var(--netgescon-space-1) var(--netgescon-space-2);
    font-size: var(--netgescon-text-xs);
}

.btn-sm {
    padding: var(--netgescon-space-2) var(--netgescon-space-3);
    font-size: var(--netgescon-text-sm);
}

.btn-md {
    padding: var(--netgescon-space-2-5) var(--netgescon-space-4);
    font-size: var(--netgescon-text-sm);
}

.btn-lg {
    padding: var(--netgescon-space-3) var(--netgescon-space-6);
    font-size: var(--netgescon-text-base);
}

.btn-xl {
    padding: var(--netgescon-space-4) var(--netgescon-space-8);
    font-size: var(--netgescon-text-lg);
}

/* === BUTTON VARIANTS === */
.btn-primary {
    background-color: var(--netgescon-primary);
    border-color: var(--netgescon-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--netgescon-primary-dark);
    border-color: var(--netgescon-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--netgescon-shadow-md);
}

.btn-secondary {
    background-color: var(--netgescon-secondary);
    border-color: var(--netgescon-secondary);
    color: white;
}

.btn-secondary:hover {
    background-color: var(--netgescon-secondary-dark);
    border-color: var(--netgescon-secondary-dark);
}

.btn-success {
    background-color: var(--netgescon-success);
    border-color: var(--netgescon-success);
    color: white;
}

.btn-success:hover {
    background-color: var(--netgescon-success-dark);
    border-color: var(--netgescon-success-dark);
}

.btn-warning {
    background-color: var(--netgescon-warning);
    border-color: var(--netgescon-warning);
    color: white;
}

.btn-warning:hover {
    background-color: var(--netgescon-warning-dark);
    border-color: var(--netgescon-warning-dark);
}

.btn-danger {
    background-color: var(--netgescon-danger);
    border-color: var(--netgescon-danger);
    color: white;
}

.btn-danger:hover {
    background-color: var(--netgescon-danger-dark);
    border-color: var(--netgescon-danger-dark);
}

/* === OUTLINE VARIANTS === */
.btn-outline-primary {
    background-color: transparent;
    border-color: var(--netgescon-primary);
    color: var(--netgescon-primary);
}

.btn-outline-primary:hover {
    background-color: var(--netgescon-primary);
    color: white;
}

/* === GHOST VARIANTS === */
.btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--netgescon-gray-700);
}

.btn-ghost:hover {
    background-color: var(--netgescon-gray-100);
    color: var(--netgescon-gray-900);
}

/* === ICON BUTTONS === */
.btn-icon-only {
    padding: var(--netgescon-space-2);
    width: 2.5rem;
    height: 2.5rem;
}

.btn-icon-only.btn-sm {
    width: 2rem;
    height: 2rem;
    padding: var(--netgescon-space-1-5);
}

.btn-icon-only.btn-lg {
    width: 3rem;
    height: 3rem;
    padding: var(--netgescon-space-3);
}

📋 FORM ELEMENTS

🎯 Input Styles

/* /public/css/design-system/forms.css */

.form-input {
    display: block;
    width: 100%;
    padding: var(--netgescon-space-2-5) var(--netgescon-space-3);
    font-size: var(--netgescon-text-sm);
    line-height: 1.5;
    color: var(--netgescon-gray-900);
    background-color: var(--netgescon-white);
    border: 1px solid var(--netgescon-gray-300);
    border-radius: var(--netgescon-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-input:focus {
    outline: none;
    border-color: var(--netgescon-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-input.is-invalid {
    border-color: var(--netgescon-danger);
}

.form-input.is-invalid:focus {
    border-color: var(--netgescon-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* === INPUT SIZES === */
.form-input-sm {
    padding: var(--netgescon-space-1-5) var(--netgescon-space-2-5);
    font-size: var(--netgescon-text-xs);
}

.form-input-lg {
    padding: var(--netgescon-space-4) var(--netgescon-space-4);
    font-size: var(--netgescon-text-base);
}

/* === SELECT STYLES === */
.form-select {
    display: block;
    width: 100%;
    padding: var(--netgescon-space-2-5) var(--netgescon-space-8) var(--netgescon-space-2-5) var(--netgescon-space-3);
    font-size: var(--netgescon-text-sm);
    line-height: 1.5;
    color: var(--netgescon-gray-900);
    background-color: var(--netgescon-white);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--netgescon-space-3) center;
    background-size: 16px 12px;
    border: 1px solid var(--netgescon-gray-300);
    border-radius: var(--netgescon-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
}

.form-select:focus {
    border-color: var(--netgescon-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* === CHECKBOX & RADIO === */
.form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.25rem;
    vertical-align: top;
    background-color: var(--netgescon-white);
    border: 1px solid var(--netgescon-gray-300);
    appearance: none;
    color: var(--netgescon-primary);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: all 0.15s ease-in-out;
}

.form-check-input[type="checkbox"] {
    border-radius: var(--netgescon-border-radius-sm);
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:checked {
    background-color: var(--netgescon-primary);
    border-color: var(--netgescon-primary);
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3E%3C/svg%3E");
}

.form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E");
}

/* === FORM GROUPS === */
.form-group {
    margin-bottom: var(--netgescon-space-4);
}

.form-label {
    display: inline-block;
    margin-bottom: var(--netgescon-space-2);
    font-weight: var(--netgescon-font-medium);
    color: var(--netgescon-gray-700);
}

.form-label.required::after {
    content: ' *';
    color: var(--netgescon-danger);
}

.form-text {
    margin-top: var(--netgescon-space-1);
    font-size: var(--netgescon-text-xs);
    color: var(--netgescon-gray-500);
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: var(--netgescon-space-1);
    font-size: var(--netgescon-text-xs);
    color: var(--netgescon-danger);
}

📊 DATA VISUALIZATION

📈 Chart Color Palettes

/* /public/css/design-system/charts.css */

:root {
    /* === CHART COLORS === */
    --netgescon-chart-primary: var(--netgescon-primary);
    --netgescon-chart-secondary: var(--netgescon-secondary);
    --netgescon-chart-success: var(--netgescon-success);
    --netgescon-chart-warning: var(--netgescon-warning);
    --netgescon-chart-danger: var(--netgescon-danger);
    --netgescon-chart-info: var(--netgescon-info);
    
    /* === CHART PALETTE === */
    --netgescon-chart-palette-1: #2563eb;
    --netgescon-chart-palette-2: #16a34a;
    --netgescon-chart-palette-3: #d97706;
    --netgescon-chart-palette-4: #dc2626;
    --netgescon-chart-palette-5: #7c3aed;
    --netgescon-chart-palette-6: #0891b2;
    --netgescon-chart-palette-7: #be185d;
    --netgescon-chart-palette-8: #059669;
    
    /* === CHART GRADIENTS === */
    --netgescon-chart-gradient-1: linear-gradient(180deg, rgba(37, 99, 235, 0.2) 0%, rgba(37, 99, 235, 0.05) 100%);
    --netgescon-chart-gradient-2: linear-gradient(180deg, rgba(22, 163, 74, 0.2) 0%, rgba(22, 163, 74, 0.05) 100%);
    --netgescon-chart-gradient-3: linear-gradient(180deg, rgba(217, 119, 6, 0.2) 0%, rgba(217, 119, 6, 0.05) 100%);
}

📊 Table Styles

.netgescon-table {
    width: 100%;
    margin-bottom: var(--netgescon-space-4);
    color: var(--netgescon-gray-900);
    border-collapse: collapse;
}

.netgescon-table th,
.netgescon-table td {
    padding: var(--netgescon-space-3) var(--netgescon-space-4);
    text-align: left;
    border-bottom: 1px solid var(--netgescon-gray-200);
}

.netgescon-table thead th {
    background-color: var(--netgescon-gray-50);
    font-weight: var(--netgescon-font-semibold);
    color: var(--netgescon-gray-700);
    font-size: var(--netgescon-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.netgescon-table tbody tr:hover {
    background-color: var(--netgescon-gray-50);
}

.netgescon-table-striped tbody tr:nth-child(odd) {
    background-color: var(--netgescon-gray-50);
}

.netgescon-table-striped tbody tr:nth-child(odd):hover {
    background-color: var(--netgescon-gray-100);
}

🎭 ICONS & GRAPHICS

🎨 Icon System

/* /public/css/design-system/icons.css */

.netgescon-icon {
    display: inline-block;
    vertical-align: middle;
    color: currentColor;
}

.netgescon-icon-xs { font-size: var(--netgescon-text-xs); }
.netgescon-icon-sm { font-size: var(--netgescon-text-sm); }
.netgescon-icon-md { font-size: var(--netgescon-text-base); }
.netgescon-icon-lg { font-size: var(--netgescon-text-lg); }
.netgescon-icon-xl { font-size: var(--netgescon-text-xl); }
.netgescon-icon-2xl { font-size: var(--netgescon-text-2xl); }

/* === ICON COLORS === */
.netgescon-icon-primary { color: var(--netgescon-primary); }
.netgescon-icon-secondary { color: var(--netgescon-secondary); }
.netgescon-icon-success { color: var(--netgescon-success); }
.netgescon-icon-warning { color: var(--netgescon-warning); }
.netgescon-icon-danger { color: var(--netgescon-danger); }
.netgescon-icon-info { color: var(--netgescon-info); }
.netgescon-icon-muted { color: var(--netgescon-gray-500); }

/* === ICON BUTTONS === */
.netgescon-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--netgescon-border-radius);
    background-color: transparent;
    border: none;
    color: var(--netgescon-gray-600);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.netgescon-icon-button:hover {
    background-color: var(--netgescon-gray-100);
    color: var(--netgescon-gray-900);
}

.netgescon-icon-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

📱 RESPONSIVE DESIGN TOKENS

📐 Breakpoints

/* /public/css/design-system/responsive.css */

:root {
    /* === BREAKPOINTS === */
    --netgescon-breakpoint-sm: 640px;
    --netgescon-breakpoint-md: 768px;
    --netgescon-breakpoint-lg: 1024px;
    --netgescon-breakpoint-xl: 1280px;
    --netgescon-breakpoint-2xl: 1536px;
}

/* === MEDIA QUERIES === */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:text-lg { font-size: var(--netgescon-text-lg); }
}

@media (min-width: 768px) {
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:text-xl { font-size: var(--netgescon-text-xl); }
    .md\:p-6 { padding: var(--netgescon-space-6); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:text-2xl { font-size: var(--netgescon-text-2xl); }
    .lg\:p-8 { padding: var(--netgescon-space-8); }
}

🚀 USAGE EXAMPLES

🎯 Complete Component Example

<!-- Esempio: Card con Design System completo -->
<div class="netgescon-card">
    <!-- Header -->
    <div class="netgescon-flex netgescon-items-center netgescon-justify-between mb-4">
        <h3 class="netgescon-h4 mb-0">Gestione Stabili</h3>
        <button class="btn btn-primary btn-sm">
            <i class="fas fa-plus netgescon-icon-sm mr-2"></i>
            Nuovo
        </button>
    </div>
    
    <!-- Content -->
    <div class="netgescon-body mb-6">
        Gestisci tutti gli stabili del tuo portafoglio immobiliare con strumenti avanzati.
    </div>
    
    <!-- Stats -->
    <div class="netgescon-grid netgescon-grid-cols-3 netgescon-gap-4 mb-6">
        <div class="text-center">
            <div class="netgescon-h3 text-primary">124</div>
            <div class="netgescon-caption">Stabili Totali</div>
        </div>
        <div class="text-center">
            <div class="netgescon-h3 text-success">98%</div>
            <div class="netgescon-caption">Occupazione</div>
        </div>
        <div class="text-center">
            <div class="netgescon-h3 text-warning">€2.4M</div>
            <div class="netgescon-caption">Valore</div>
        </div>
    </div>
    
    <!-- Actions -->
    <div class="netgescon-flex netgescon-justify-between">
        <button class="btn btn-outline-primary">
            <i class="fas fa-chart-bar netgescon-icon-sm mr-2"></i>
            Report
        </button>
        <button class="btn btn-secondary">
            <i class="fas fa-cog netgescon-icon-sm mr-2"></i>
            Impostazioni
        </button>
    </div>
</div>

🧪 TESTING & VALIDATION

✅ Design System Checklist

  • Colori - Tutti i colori seguono le variabili CSS
  • Typography - Font sizes e weights consistenti
  • Spacing - Margini e padding seguono la scala
  • Componenti - Stili riutilizzabili e modulari
  • Responsiveness - Breakpoints funzionali
  • Accessibilità - Contrasto e focus states
  • Performance - CSS ottimizzato e minificato

🎨 Style Guide Generator

<!-- resources/views/admin/style-guide.blade.php -->
@extends('layouts.admin')

@section('title', 'Style Guide NetGescon')

@section('content')
<div class="netgescon-container">
    <!-- Colors -->
    <section class="mb-12">
        <h2 class="netgescon-h2">Palette Colori</h2>
        <div class="netgescon-grid netgescon-grid-cols-6 netgescon-gap-4">
            <div class="text-center">
                <div class="w-16 h-16 rounded-lg mx-auto mb-2" style="background-color: var(--netgescon-primary);"></div>
                <div class="netgescon-caption">Primary</div>
            </div>
            <!-- Altri colori... -->
        </div>
    </section>
    
    <!-- Typography -->
    <section class="mb-12">
        <h2 class="netgescon-h2">Typography</h2>
        <div class="space-y-4">
            <h1 class="netgescon-h1">Heading 1</h1>
            <h2 class="netgescon-h2">Heading 2</h2>
            <h3 class="netgescon-h3">Heading 3</h3>
            <h4 class="netgescon-h4">Heading 4</h4>
            <p class="netgescon-body">Body text regular</p>
            <p class="netgescon-body-sm">Body text small</p>
        </div>
    </section>
    
    <!-- Buttons -->
    <section class="mb-12">
        <h2 class="netgescon-h2">Buttons</h2>
        <div class="netgescon-flex netgescon-flex-wrap netgescon-gap-4">
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-secondary">Secondary</button>
            <button class="btn btn-success">Success</button>
            <button class="btn btn-warning">Warning</button>
            <button class="btn btn-danger">Danger</button>
        </div>
    </section>
</div>
@endsection

📚 FILES CORRELATI

🎨 Design System Files

  • /public/css/design-system/ (directory)
  • /public/css/design-system/colors.css
  • /public/css/design-system/typography.css
  • /public/css/design-system/spacing.css
  • /public/css/design-system/buttons.css
  • /public/css/design-system/forms.css
  • /public/css/design-system/charts.css
  • /public/css/design-system/icons.css
  • /public/css/design-system/responsive.css

📄 Template Files

  • /resources/views/admin/style-guide.blade.php
  • /resources/views/components/design-system/ (directory)

🎯 NEXT STEPS

🔮 Design System Evolution

  • CSS Variables 2.0 - Support per advanced features
  • Dark Mode - Tema scuro completo
  • Animation Library - Micro-animations standardizzate
  • Component Variants - Più varianti per ogni componente
  • Design Tokens Export - Export per altri tools

📝 Documento mantenuto da: GitHub Copilot AI Assistant
🔗 Componente: Design System NetGescon Interface v2.1.0