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

997 lines
29 KiB
Markdown
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**
```css
/* /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**
```css
/* 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**
```css
/* /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**
```css
/* === 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**
```css
/* /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**
```css
/* === 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**
```css
/* /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**
```css
/* /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**
```css
/* /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**
```css
.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**
```css
/* /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**
```css
/* /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**
```blade
<!-- 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**
```blade
<!-- 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*
Reference in New Issue View Git Blame Copy Permalink