@polymorphism-tech/morph-spec 2.4.0 → 3.0.0

package/content/.morph/templates/ui-design-system.md

@@ -1,286 +1,286 @@
-# UI Design System - {Project Name}
-
-> Design system do projeto: cores, tipografia, espaçamento e padrões visuais.
-> Este arquivo é a fonte da verdade para todos os aspectos visuais do projeto.
-
----
-
-## 🎨 Paleta de Cores
-
-### Cores Principais
-
-| Uso | Cor | Hex | RGB | Preview |
-|-----|-----|-----|-----|---------|
-| **Primária** | {Nome da cor} | `#{hex}` | `rgb({r}, {g}, {b})` | ███ |
-| **Secundária** | {Nome da cor} | `#{hex}` | `rgb({r}, {g}, {b})` | ███ |
-
-**Exemplo:**
-| Uso | Cor | Hex | RGB | Preview |
-|-----|-----|-----|-----|---------|
-| **Primária** | Blue | `#3b82f6` | `rgb(59, 130, 246)` | 🔵 |
-| **Secundária** | Gray | `#6b7280` | `rgb(107, 114, 128)` | ⚫ |
-
-### Cores de Estado
-
-| Estado | Cor | Hex | RGB | Uso |
-|--------|-----|-----|-----|-----|
-| **Sucesso** | {Cor} | `#{hex}` | `rgb({r}, {g}, {b})` | Confirmações, operações bem-sucedidas |
-| **Erro** | {Cor} | `#{hex}` | `rgb({r}, {g}, {b})` | Erros, validações falhas |
-| **Warning** | {Cor} | `#{hex}` | `rgb({r}, {g}, {b})` | Avisos, atenção necessária |
-| **Info** | {Cor} | `#{hex}` | `rgb({r}, {g}, {b})` | Informações, dicas |
-
-**Exemplo (Tailwind):**
-| Estado | Cor | Hex | RGB | Uso |
-|--------|-----|-----|-----|-----|
-| **Sucesso** | Green | `#10b981` | `rgb(16, 185, 129)` | Confirmações |
-| **Erro** | Red | `#ef4444` | `rgb(239, 68, 68)` | Erros |
-| **Warning** | Amber | `#f59e0b` | `rgb(245, 158, 11)` | Avisos |
-| **Info** | Cyan | `#06b6d4` | `rgb(6, 182, 212)` | Informações |
-
-### Escala de Neutros (Cinzas)
-
-| Shade | Hex | RGB | Uso |
-|-------|-----|-----|-----|
-| **50** | `#{hex}` | `rgb({r}, {g}, {b})` | Fundos muito claros |
-| **100** | `#{hex}` | `rgb({r}, {g}, {b})` | Fundos claros |
-| **200** | `#{hex}` | `rgb({r}, {g}, {b})` | Bordas suaves |
-| **300** | `#{hex}` | `rgb({r}, {g}, {b})` | Bordas padrão |
-| **400** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto desabilitado |
-| **500** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto secundário |
-| **600** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto placeholder |
-| **700** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto principal |
-| **800** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto ênfase |
-| **900** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto super ênfase |
-
-**Exemplo (Tailwind Gray):**
-| Shade | Hex | RGB |
-|-------|-----|-----|
-| **50** | `#f9fafb` | `rgb(249, 250, 251)` |
-| **100** | `#f3f4f6` | `rgb(243, 244, 246)` |
-| **500** | `#6b7280` | `rgb(107, 114, 128)` |
-| **900** | `#111827` | `rgb(17, 24, 39)` |
-
----
-
-## 🔤 Tipografia
-
-### Fontes
-
-| Tipo | Font Family | Stack Completo | Uso |
-|------|-------------|----------------|-----|
-| **Sans-serif** | {Font} | `'{Font}', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif` | Texto principal, UI |
-| **Serif** | {Font} | `'{Font}', Georgia, serif` | Títulos, ênfase (opcional) |
-| **Monospace** | {Font} | `'{Font}', 'Courier New', monospace` | Código, dados técnicos |
-
-**Exemplo:**
-| Tipo | Font Family | Stack | Uso |
-|------|-------------|-------|-----|
-| **Sans-serif** | Inter | `'Inter', -apple-system, sans-serif` | Texto principal |
-| **Monospace** | Fira Code | `'Fira Code', 'Courier New', monospace` | Código |
-
-### Escala de Tamanhos
-
-| Size | Valor | Line Height | Uso |
-|------|-------|-------------|-----|
-| **xs** | `{size}` | `{height}` | Texto muito pequeno, labels |
-| **sm** | `{size}` | `{height}` | Texto pequeno, captions |
-| **base** | `{size}` | `{height}` | Texto padrão, body |
-| **lg** | `{size}` | `{height}` | Texto grande, leads |
-| **xl** | `{size}` | `{height}` | Títulos H4 |
-| **2xl** | `{size}` | `{height}` | Títulos H3 |
-| **3xl** | `{size}` | `{height}` | Títulos H2 |
-| **4xl** | `{size}` | `{height}` | Títulos H1 |
-| **5xl** | `{size}` | `{height}` | Display text |
-
-**Exemplo (Tailwind):**
-| Size | Valor | Line Height |
-|------|-------|-------------|
-| **xs** | `0.75rem` (12px) | `1rem` (16px) |
-| **sm** | `0.875rem` (14px) | `1.25rem` (20px) |
-| **base** | `1rem` (16px) | `1.5rem` (24px) |
-| **lg** | `1.125rem` (18px) | `1.75rem` (28px) |
-| **xl** | `1.25rem` (20px) | `1.75rem` (28px) |
-| **4xl** | `2.25rem` (36px) | `2.5rem` (40px) |
-
-### Pesos (Font Weight)
-
-| Weight | Valor | Uso |
-|--------|-------|-----|
-| **Light** | `300` | Texto decorativo, opcional |
-| **Regular** | `400` | Texto padrão |
-| **Medium** | `500` | Texto com ênfase leve |
-| **Semibold** | `600` | Botões, labels importantes |
-| **Bold** | `700` | Títulos, ênfase forte |
-
----
-
-## 📏 Espaçamento
-
-### Sistema Base
-
-**Unidade base:** `{value}` (ex: 4px, 8px)
-**Escala:** Múltiplos da unidade base
-
-| Token | Valor | Pixels | Uso |
-|-------|-------|--------|-----|
-| **0** | `0` | 0px | Sem espaçamento |
-| **1** | `{base * 1}` | {px} | Espaço mínimo |
-| **2** | `{base * 2}` | {px} | Espaço pequeno |
-| **3** | `{base * 3}` | {px} | Espaço médio-pequeno |
-| **4** | `{base * 4}` | {px} | Espaço médio |
-| **5** | `{base * 5}` | {px} | Espaço médio-grande |
-| **6** | `{base * 6}` | {px} | Espaço grande |
-| **8** | `{base * 8}` | {px} | Espaço muito grande |
-| **10** | `{base * 10}` | {px} | Espaço extra grande |
-| **12** | `{base * 12}` | {px} | Espaço gigante |
-
-**Exemplo (base 4px = 0.25rem):**
-| Token | Valor | Pixels | Uso |
-|-------|-------|--------|-----|
-| **1** | `0.25rem` | 4px | Gap mínimo entre ícones |
-| **2** | `0.5rem` | 8px | Padding interno de botões |
-| **4** | `1rem` | 16px | Padding padrão de cards |
-| **6** | `1.5rem` | 24px | Margin entre seções |
-| **8** | `2rem` | 32px | Margin grande entre blocos |
-
----
-
-## 🔲 Border Radius
-
-| Size | Valor | Uso |
-|------|-------|-----|
-| **none** | `0` | Sem arredondamento |
-| **sm** | `{value}` | Arredondamento sutil |
-| **md** | `{value}` | Arredondamento padrão |
-| **lg** | `{value}` | Arredondamento pronunciado |
-| **xl** | `{value}` | Muito arredondado |
-| **full** | `9999px` | Circular (botões redondos, avatares) |
-
-**Exemplo:**
-| Size | Valor | Uso |
-|------|-------|-----|
-| **sm** | `0.125rem` (2px) | Inputs, tabelas |
-| **md** | `0.375rem` (6px) | Botões, cards |
-| **lg** | `0.5rem` (8px) | Modais, containers |
-| **full** | `9999px` | Avatares, badges circulares |
-
----
-
-## 🌑 Sombras (Shadows)
-
-| Size | Valor | Uso |
-|------|-------|-----|
-| **sm** | `{shadow}` | Sombra sutil (hover) |
-| **md** | `{shadow}` | Sombra padrão (cards) |
-| **lg** | `{shadow}` | Sombra pronunciada (modals) |
-| **xl** | `{shadow}` | Sombra forte (dropdowns) |
-
-**Exemplo (Tailwind):**
-| Size | Valor |
-|------|-------|
-| **sm** | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` |
-| **md** | `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)` |
-| **lg** | `0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)` |
-
----
-
-## 📱 Breakpoints (Responsive)
-
-| Breakpoint | Min Width | Dispositivos |
-|------------|-----------|--------------|
-| **xs** | `0px` | Mobile portrait (padrão) |
-| **sm** | `{value}` | Mobile landscape / Tablet pequeno |
-| **md** | `{value}` | Tablet |
-| **lg** | `{value}` | Desktop pequeno |
-| **xl** | `{value}` | Desktop grande |
-| **2xl** | `{value}` | Desktop muito grande |
-
-**Exemplo (Tailwind):**
-| Breakpoint | Min Width |
-|------------|-----------|
-| **sm** | `640px` |
-| **md** | `768px` |
-| **lg** | `1024px` |
-| **xl** | `1280px` |
-| **2xl** | `1536px` |
-
----
-
-## 🎯 Aplicação no Código
-
-### CSS Variables (Recomendado)
-
-Ver template: `design-system.css`
-
-```css
-:root {
-  /* Cores */
-  --color-primary: #{hex};
-  --color-secondary: #{hex};
-
-  /* Tipografia */
-  --font-sans: '{Font}', sans-serif;
-  --text-base: 1rem;
-
-  /* Espaçamento */
-  --space-4: 1rem;
-}
-```
-
-### Fluent UI Theme (se Fluent UI)
-
-Ver template: `FluentDesignTheme.cs`
-
-```csharp
-public static class FluentDesignTheme
-{
-    public static DesignThemePalette GetPalette() => new()
-    {
-        Primary = "#{cor primária}",
-        // ...
-    };
-}
-```
-
-### MudBlazor Theme (se MudBlazor)
-
-Ver template: `MudTheme.cs`
-
-```csharp
-public static MudTheme Theme => new()
-{
-    Palette = new PaletteLight
-    {
-        Primary = "#{cor primária}",
-        // ...
-    }
-};
-```
-
----
-
-## 📋 Checklist de Consistência
-
-- [ ] Todas as cores têm hex + rgb documentados
-- [ ] Escala de neutros completa (50-900)
-- [ ] Fontes têm fallback stacks completos
-- [ ] Escala de tamanhos cobre todos os casos (xs até 5xl)
-- [ ] Espaçamento usa múltiplos da unidade base
-- [ ] Border radius tem tamanhos sm, md, lg, full
-- [ ] Sombras têm variações de intensidade
-- [ ] Breakpoints cobrem mobile até desktop grande
-- [ ] Design system será implementado na FASE 5 (arquivos CSS/C#)
-
----
-
-## 🔗 Referências
-
-- [Fluent Design System](https://fluent2.microsoft.design/)
-- [Material Design](https://m3.material.io/)
-- [Tailwind CSS Palette](https://tailwindcss.com/docs/customizing-colors)
-- [Type Scale](https://type-scale.com/)
-- [Modular Scale](https://www.modularscale.com/)
-
----
-
-*Template MORPH-SPEC v2.1.1 by Polymorphism Tech*
+# UI Design System - {Project Name}
+
+> Design system do projeto: cores, tipografia, espaçamento e padrões visuais.
+> Este arquivo é a fonte da verdade para todos os aspectos visuais do projeto.
+
+---
+
+## 🎨 Paleta de Cores
+
+### Cores Principais
+
+| Uso | Cor | Hex | RGB | Preview |
+|-----|-----|-----|-----|---------|
+| **Primária** | {Nome da cor} | `#{hex}` | `rgb({r}, {g}, {b})` | ███ |
+| **Secundária** | {Nome da cor} | `#{hex}` | `rgb({r}, {g}, {b})` | ███ |
+
+**Exemplo:**
+| Uso | Cor | Hex | RGB | Preview |
+|-----|-----|-----|-----|---------|
+| **Primária** | Blue | `#3b82f6` | `rgb(59, 130, 246)` | 🔵 |
+| **Secundária** | Gray | `#6b7280` | `rgb(107, 114, 128)` | ⚫ |
+
+### Cores de Estado
+
+| Estado | Cor | Hex | RGB | Uso |
+|--------|-----|-----|-----|-----|
+| **Sucesso** | {Cor} | `#{hex}` | `rgb({r}, {g}, {b})` | Confirmações, operações bem-sucedidas |
+| **Erro** | {Cor} | `#{hex}` | `rgb({r}, {g}, {b})` | Erros, validações falhas |
+| **Warning** | {Cor} | `#{hex}` | `rgb({r}, {g}, {b})` | Avisos, atenção necessária |
+| **Info** | {Cor} | `#{hex}` | `rgb({r}, {g}, {b})` | Informações, dicas |
+
+**Exemplo (Tailwind):**
+| Estado | Cor | Hex | RGB | Uso |
+|--------|-----|-----|-----|-----|
+| **Sucesso** | Green | `#10b981` | `rgb(16, 185, 129)` | Confirmações |
+| **Erro** | Red | `#ef4444` | `rgb(239, 68, 68)` | Erros |
+| **Warning** | Amber | `#f59e0b` | `rgb(245, 158, 11)` | Avisos |
+| **Info** | Cyan | `#06b6d4` | `rgb(6, 182, 212)` | Informações |
+
+### Escala de Neutros (Cinzas)
+
+| Shade | Hex | RGB | Uso |
+|-------|-----|-----|-----|
+| **50** | `#{hex}` | `rgb({r}, {g}, {b})` | Fundos muito claros |
+| **100** | `#{hex}` | `rgb({r}, {g}, {b})` | Fundos claros |
+| **200** | `#{hex}` | `rgb({r}, {g}, {b})` | Bordas suaves |
+| **300** | `#{hex}` | `rgb({r}, {g}, {b})` | Bordas padrão |
+| **400** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto desabilitado |
+| **500** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto secundário |
+| **600** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto placeholder |
+| **700** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto principal |
+| **800** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto ênfase |
+| **900** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto super ênfase |
+
+**Exemplo (Tailwind Gray):**
+| Shade | Hex | RGB |
+|-------|-----|-----|
+| **50** | `#f9fafb` | `rgb(249, 250, 251)` |
+| **100** | `#f3f4f6` | `rgb(243, 244, 246)` |
+| **500** | `#6b7280` | `rgb(107, 114, 128)` |
+| **900** | `#111827` | `rgb(17, 24, 39)` |
+
+---
+
+## 🔤 Tipografia
+
+### Fontes
+
+| Tipo | Font Family | Stack Completo | Uso |
+|------|-------------|----------------|-----|
+| **Sans-serif** | {Font} | `'{Font}', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif` | Texto principal, UI |
+| **Serif** | {Font} | `'{Font}', Georgia, serif` | Títulos, ênfase (opcional) |
+| **Monospace** | {Font} | `'{Font}', 'Courier New', monospace` | Código, dados técnicos |
+
+**Exemplo:**
+| Tipo | Font Family | Stack | Uso |
+|------|-------------|-------|-----|
+| **Sans-serif** | Inter | `'Inter', -apple-system, sans-serif` | Texto principal |
+| **Monospace** | Fira Code | `'Fira Code', 'Courier New', monospace` | Código |
+
+### Escala de Tamanhos
+
+| Size | Valor | Line Height | Uso |
+|------|-------|-------------|-----|
+| **xs** | `{size}` | `{height}` | Texto muito pequeno, labels |
+| **sm** | `{size}` | `{height}` | Texto pequeno, captions |
+| **base** | `{size}` | `{height}` | Texto padrão, body |
+| **lg** | `{size}` | `{height}` | Texto grande, leads |
+| **xl** | `{size}` | `{height}` | Títulos H4 |
+| **2xl** | `{size}` | `{height}` | Títulos H3 |
+| **3xl** | `{size}` | `{height}` | Títulos H2 |
+| **4xl** | `{size}` | `{height}` | Títulos H1 |
+| **5xl** | `{size}` | `{height}` | Display text |
+
+**Exemplo (Tailwind):**
+| Size | Valor | Line Height |
+|------|-------|-------------|
+| **xs** | `0.75rem` (12px) | `1rem` (16px) |
+| **sm** | `0.875rem` (14px) | `1.25rem` (20px) |
+| **base** | `1rem` (16px) | `1.5rem` (24px) |
+| **lg** | `1.125rem` (18px) | `1.75rem` (28px) |
+| **xl** | `1.25rem` (20px) | `1.75rem` (28px) |
+| **4xl** | `2.25rem` (36px) | `2.5rem` (40px) |
+
+### Pesos (Font Weight)
+
+| Weight | Valor | Uso |
+|--------|-------|-----|
+| **Light** | `300` | Texto decorativo, opcional |
+| **Regular** | `400` | Texto padrão |
+| **Medium** | `500` | Texto com ênfase leve |
+| **Semibold** | `600` | Botões, labels importantes |
+| **Bold** | `700` | Títulos, ênfase forte |
+
+---
+
+## 📏 Espaçamento
+
+### Sistema Base
+
+**Unidade base:** `{value}` (ex: 4px, 8px)
+**Escala:** Múltiplos da unidade base
+
+| Token | Valor | Pixels | Uso |
+|-------|-------|--------|-----|
+| **0** | `0` | 0px | Sem espaçamento |
+| **1** | `{base * 1}` | {px} | Espaço mínimo |
+| **2** | `{base * 2}` | {px} | Espaço pequeno |
+| **3** | `{base * 3}` | {px} | Espaço médio-pequeno |
+| **4** | `{base * 4}` | {px} | Espaço médio |
+| **5** | `{base * 5}` | {px} | Espaço médio-grande |
+| **6** | `{base * 6}` | {px} | Espaço grande |
+| **8** | `{base * 8}` | {px} | Espaço muito grande |
+| **10** | `{base * 10}` | {px} | Espaço extra grande |
+| **12** | `{base * 12}` | {px} | Espaço gigante |
+
+**Exemplo (base 4px = 0.25rem):**
+| Token | Valor | Pixels | Uso |
+|-------|-------|--------|-----|
+| **1** | `0.25rem` | 4px | Gap mínimo entre ícones |
+| **2** | `0.5rem` | 8px | Padding interno de botões |
+| **4** | `1rem` | 16px | Padding padrão de cards |
+| **6** | `1.5rem` | 24px | Margin entre seções |
+| **8** | `2rem` | 32px | Margin grande entre blocos |
+
+---
+
+## 🔲 Border Radius
+
+| Size | Valor | Uso |
+|------|-------|-----|
+| **none** | `0` | Sem arredondamento |
+| **sm** | `{value}` | Arredondamento sutil |
+| **md** | `{value}` | Arredondamento padrão |
+| **lg** | `{value}` | Arredondamento pronunciado |
+| **xl** | `{value}` | Muito arredondado |
+| **full** | `9999px` | Circular (botões redondos, avatares) |
+
+**Exemplo:**
+| Size | Valor | Uso |
+|------|-------|-----|
+| **sm** | `0.125rem` (2px) | Inputs, tabelas |
+| **md** | `0.375rem` (6px) | Botões, cards |
+| **lg** | `0.5rem` (8px) | Modais, containers |
+| **full** | `9999px` | Avatares, badges circulares |
+
+---
+
+## 🌑 Sombras (Shadows)
+
+| Size | Valor | Uso |
+|------|-------|-----|
+| **sm** | `{shadow}` | Sombra sutil (hover) |
+| **md** | `{shadow}` | Sombra padrão (cards) |
+| **lg** | `{shadow}` | Sombra pronunciada (modals) |
+| **xl** | `{shadow}` | Sombra forte (dropdowns) |
+
+**Exemplo (Tailwind):**
+| Size | Valor |
+|------|-------|
+| **sm** | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` |
+| **md** | `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)` |
+| **lg** | `0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)` |
+
+---
+
+## 📱 Breakpoints (Responsive)
+
+| Breakpoint | Min Width | Dispositivos |
+|------------|-----------|--------------|
+| **xs** | `0px` | Mobile portrait (padrão) |
+| **sm** | `{value}` | Mobile landscape / Tablet pequeno |
+| **md** | `{value}` | Tablet |
+| **lg** | `{value}` | Desktop pequeno |
+| **xl** | `{value}` | Desktop grande |
+| **2xl** | `{value}` | Desktop muito grande |
+
+**Exemplo (Tailwind):**
+| Breakpoint | Min Width |
+|------------|-----------|
+| **sm** | `640px` |
+| **md** | `768px` |
+| **lg** | `1024px` |
+| **xl** | `1280px` |
+| **2xl** | `1536px` |
+
+---
+
+## 🎯 Aplicação no Código
+
+### CSS Variables (Recomendado)
+
+Ver template: `design-system.css`
+
+```css
+:root {
+  /* Cores */
+  --color-primary: #{hex};
+  --color-secondary: #{hex};
+
+  /* Tipografia */
+  --font-sans: '{Font}', sans-serif;
+  --text-base: 1rem;
+
+  /* Espaçamento */
+  --space-4: 1rem;
+}
+```
+
+### Fluent UI Theme (se Fluent UI)
+
+Ver template: `FluentDesignTheme.cs`
+
+```csharp
+public static class FluentDesignTheme
+{
+    public static DesignThemePalette GetPalette() => new()
+    {
+        Primary = "#{cor primária}",
+        // ...
+    };
+}
+```
+
+### MudBlazor Theme (se MudBlazor)
+
+Ver template: `MudTheme.cs`
+
+```csharp
+public static MudTheme Theme => new()
+{
+    Palette = new PaletteLight
+    {
+        Primary = "#{cor primária}",
+        // ...
+    }
+};
+```
+
+---
+
+## 📋 Checklist de Consistência
+
+- [ ] Todas as cores têm hex + rgb documentados
+- [ ] Escala de neutros completa (50-900)
+- [ ] Fontes têm fallback stacks completos
+- [ ] Escala de tamanhos cobre todos os casos (xs até 5xl)
+- [ ] Espaçamento usa múltiplos da unidade base
+- [ ] Border radius tem tamanhos sm, md, lg, full
+- [ ] Sombras têm variações de intensidade
+- [ ] Breakpoints cobrem mobile até desktop grande
+- [ ] Design system será implementado na FASE 5 (arquivos CSS/C#)
+
+---
+
+## 🔗 Referências
+
+- [Fluent Design System](https://fluent2.microsoft.design/)
+- [Material Design](https://m3.material.io/)
+- [Tailwind CSS Palette](https://tailwindcss.com/docs/customizing-colors)
+- [Type Scale](https://type-scale.com/)
+- [Modular Scale](https://www.modularscale.com/)
+
+---
+
+*Template MORPH-SPEC v2.1.1 by Polymorphism Tech*