@polymorphism-tech/morph-spec 4.10.6 → 4.10.8

package/framework/templates/examples/design-system-examples.md

@@ -1,357 +1,357 @@
-# Design System CSS Index Template
-
-> Template de indice estruturado para arquivos CSS grandes.
-> Copie este header para o inicio do seu `design-system.css`.
-
-## Indice Padrao
-
-```css
-/* ===========================================================================
-   {PROJECT_NAME} Design System
-   ===========================================================================
-
-   Indice de Secoes
-   ================
-
-   1-99:     Tokens e Variaveis CSS
-   100-199:  Reset e Base Styles
-   200-299:  Tipografia
-   300-399:  Layout e Containers
-   400-499:  Componentes Base (buttons, inputs, cards)
-   500-599:  Componentes Compostos (forms, tables, lists)
-   600-699:  Navegacao (header, sidebar, footer, menus)
-   700-799:  Paginas Especificas
-   800-849:  Modais e Overlays
-   850-899:  Animacoes e Keyframes
-   900-949:  Responsivo e Media Queries
-   950-979:  Utilities e Helpers
-   980-989:  Overrides de Fluent UI / MudBlazor
-   990-999:  Hotfixes e Temporarios
-
-   Convencoes de Nomenclatura
-   ==========================
-
-   Prefixo por Pagina:
-   - .home-*      : Pagina inicial
-   - .checkout-*  : Pagina de checkout
-   - .dashboard-* : Pagina de dashboard
-   - .auth-*      : Paginas de autenticacao
-
-   Prefixo por Componente:
-   - .btn-*       : Botoes
-   - .card-*      : Cards
-   - .modal-*     : Modais
-   - .form-*      : Formularios
-   - .nav-*       : Navegacao
-
-   Sufixos de Estado:
-   - *--active    : Estado ativo
-   - *--disabled  : Estado desabilitado
-   - *--loading   : Estado de loading
-   - *--error     : Estado de erro
-
-   Validacao:
-   morph-spec validate-css src/MyApp.Web
-
-   =========================================================================== */
-
-
-/* ===========================================================================
-   SECAO 1-99: TOKENS E VARIAVEIS CSS
-   =========================================================================== */
-
-:root {
-  /* Cores Primarias */
-  --primary: #3b82f6;
-  --primary-hover: #2563eb;
-  --primary-active: #1d4ed8;
-
-  /* Cores Secundarias */
-  --secondary: #6b7280;
-  --secondary-hover: #4b5563;
-
-  /* Cores Semanticas */
-  --success: #10b981;
-  --warning: #f59e0b;
-  --error: #ef4444;
-  --info: #06b6d4;
-
-  /* Neutros */
-  --neutral-50: #f9fafb;
-  --neutral-100: #f3f4f6;
-  --neutral-200: #e5e7eb;
-  --neutral-300: #d1d5db;
-  --neutral-400: #9ca3af;
-  --neutral-500: #6b7280;
-  --neutral-600: #4b5563;
-  --neutral-700: #374151;
-  --neutral-800: #1f2937;
-  --neutral-900: #111827;
-
-  /* Tipografia */
-  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
-  --font-family-mono: 'JetBrains Mono', monospace;
-
-  --font-size-xs: 0.75rem;   /* 12px */
-  --font-size-sm: 0.875rem;  /* 14px */
-  --font-size-base: 1rem;    /* 16px */
-  --font-size-lg: 1.125rem;  /* 18px */
-  --font-size-xl: 1.25rem;   /* 20px */
-  --font-size-2xl: 1.5rem;   /* 24px */
-  --font-size-3xl: 1.875rem; /* 30px */
-  --font-size-4xl: 2.25rem;  /* 36px */
-
-  /* Espacamento (base 4px) */
-  --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 */
-
-  /* Border Radius */
-  --radius-sm: 0.25rem;  /* 4px */
-  --radius-md: 0.5rem;   /* 8px */
-  --radius-lg: 0.75rem;  /* 12px */
-  --radius-xl: 1rem;     /* 16px */
-  --radius-full: 9999px;
-
-  /* Sombras */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
-
-  /* Transicoes */
-  --transition-fast: 150ms ease;
-  --transition-normal: 300ms ease;
-  --transition-slow: 500ms ease;
-
-  /* Z-Index */
-  --z-dropdown: 1000;
-  --z-sticky: 1020;
-  --z-fixed: 1030;
-  --z-modal-backdrop: 1040;
-  --z-modal: 1050;
-  --z-popover: 1060;
-  --z-tooltip: 1070;
-}
-
-
-/* ===========================================================================
-   SECAO 100-199: RESET E BASE STYLES
-   =========================================================================== */
-
-/* ... */
-
-
-/* ===========================================================================
-   SECAO 200-299: TIPOGRAFIA
-   =========================================================================== */
-
-/* ... */
-
-
-/* ===========================================================================
-   SECAO 300-399: LAYOUT E CONTAINERS
-   =========================================================================== */
-
-.page-layout {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.page-content {
-  flex: 1;
-  padding: var(--space-6);
-}
-
-.container {
-  width: 100%;
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0 var(--space-4);
-}
-
-
-/* ===========================================================================
-   SECAO 400-499: COMPONENTES BASE
-   =========================================================================== */
-
-/* Botoes */
-.btn-primary { /* ... */ }
-.btn-secondary { /* ... */ }
-
-/* Cards */
-.card { /* ... */ }
-.card-premium { /* ... */ }
-
-/* Inputs */
-.input { /* ... */ }
-
-
-/* ===========================================================================
-   SECAO 500-599: COMPONENTES COMPOSTOS
-   =========================================================================== */
-
-/* Forms */
-.form-group { /* ... */ }
-.form-label { /* ... */ }
-
-/* Tables */
-.data-table { /* ... */ }
-
-
-/* ===========================================================================
-   SECAO 600-699: NAVEGACAO
-   =========================================================================== */
-
-.page-header-nav { /* ... */ }
-.page-footer { /* ... */ }
-.sidebar { /* ... */ }
-
-
-/* ===========================================================================
-   SECAO 700-799: PAGINAS ESPECIFICAS
-   =========================================================================== */
-
-/* Home */
-.home-hero { /* ... */ }
-.home-features { /* ... */ }
-
-/* Checkout */
-.checkout-form { /* ... */ }
-.checkout-summary { /* ... */ }
-
-
-/* ===========================================================================
-   SECAO 800-849: MODAIS E OVERLAYS
-   =========================================================================== */
-
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  z-index: var(--z-modal-backdrop);
-}
-
-.modal-container {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: var(--z-modal);
-}
-
-
-/* ===========================================================================
-   SECAO 850-899: ANIMACOES E KEYFRAMES
-   =========================================================================== */
-
-@keyframes slideInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.animate-slideInUp {
-  animation: slideInUp var(--transition-normal) forwards;
-}
-
-.animate-scaleIn {
-  animation: scaleIn var(--transition-fast) forwards;
-}
-
-/* Stagger delays para animacoes em sequencia */
-.stagger-1 { animation-delay: 0.1s; }
-.stagger-2 { animation-delay: 0.2s; }
-.stagger-3 { animation-delay: 0.3s; }
-.stagger-4 { animation-delay: 0.4s; }
-.stagger-5 { animation-delay: 0.5s; }
-
-
-/* ===========================================================================
-   SECAO 900-949: RESPONSIVO E MEDIA QUERIES
-   =========================================================================== */
-
-@media (max-width: 768px) {
-  /* Tablet e Mobile */
-}
-
-@media (max-width: 480px) {
-  /* Mobile */
-}
-
-
-/* ===========================================================================
-   SECAO 950-979: UTILITIES E HELPERS
-   =========================================================================== */
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-
-/* ===========================================================================
-   SECAO 980-989: OVERRIDES DE FLUENT UI / MUDBLAZOR
-   =========================================================================== */
-
-/* Fluent UI overrides */
-.fluent-card {
-  /* Customizacoes */
-}
-
-
-/* ===========================================================================
-   SECAO 990-999: HOTFIXES E TEMPORARIOS
-   =========================================================================== */
-
-/* TODO: Remover apos fix no componente X */
-```
-
-## Uso
-
-1. Copie o header para o inicio do seu `design-system.css`
-2. Substitua `{PROJECT_NAME}` pelo nome do seu projeto
-3. Adicione suas classes CSS nas secoes apropriadas
-4. Mantenha o indice atualizado conforme adiciona novas secoes
-
-## Beneficios
-
-- **Navegacao rapida:** Use Ctrl+G (go to line) para pular para secoes
-- **Organizacao clara:** Cada tipo de componente em sua secao
-- **Facil manutencao:** Encontre onde adicionar novos estilos
-- **Evita conflitos:** Prefixos por pagina previnem colisoes
-
----
-
-*Template MORPH-SPEC by Polymorphism Tech*
+# Design System CSS Index Template
+
+> Template de indice estruturado para arquivos CSS grandes.
+> Copie este header para o inicio do seu `design-system.css`.
+
+## Indice Padrao
+
+```css
+/* ===========================================================================
+   {PROJECT_NAME} Design System
+   ===========================================================================
+
+   Indice de Secoes
+   ================
+
+   1-99:     Tokens e Variaveis CSS
+   100-199:  Reset e Base Styles
+   200-299:  Tipografia
+   300-399:  Layout e Containers
+   400-499:  Componentes Base (buttons, inputs, cards)
+   500-599:  Componentes Compostos (forms, tables, lists)
+   600-699:  Navegacao (header, sidebar, footer, menus)
+   700-799:  Paginas Especificas
+   800-849:  Modais e Overlays
+   850-899:  Animacoes e Keyframes
+   900-949:  Responsivo e Media Queries
+   950-979:  Utilities e Helpers
+   980-989:  Overrides de Fluent UI / MudBlazor
+   990-999:  Hotfixes e Temporarios
+
+   Convencoes de Nomenclatura
+   ==========================
+
+   Prefixo por Pagina:
+   - .home-*      : Pagina inicial
+   - .checkout-*  : Pagina de checkout
+   - .dashboard-* : Pagina de dashboard
+   - .auth-*      : Paginas de autenticacao
+
+   Prefixo por Componente:
+   - .btn-*       : Botoes
+   - .card-*      : Cards
+   - .modal-*     : Modais
+   - .form-*      : Formularios
+   - .nav-*       : Navegacao
+
+   Sufixos de Estado:
+   - *--active    : Estado ativo
+   - *--disabled  : Estado desabilitado
+   - *--loading   : Estado de loading
+   - *--error     : Estado de erro
+
+   Validacao:
+   morph-spec validate-css src/MyApp.Web
+
+   =========================================================================== */
+
+
+/* ===========================================================================
+   SECAO 1-99: TOKENS E VARIAVEIS CSS
+   =========================================================================== */
+
+:root {
+  /* Cores Primarias */
+  --primary: #3b82f6;
+  --primary-hover: #2563eb;
+  --primary-active: #1d4ed8;
+
+  /* Cores Secundarias */
+  --secondary: #6b7280;
+  --secondary-hover: #4b5563;
+
+  /* Cores Semanticas */
+  --success: #10b981;
+  --warning: #f59e0b;
+  --error: #ef4444;
+  --info: #06b6d4;
+
+  /* Neutros */
+  --neutral-50: #f9fafb;
+  --neutral-100: #f3f4f6;
+  --neutral-200: #e5e7eb;
+  --neutral-300: #d1d5db;
+  --neutral-400: #9ca3af;
+  --neutral-500: #6b7280;
+  --neutral-600: #4b5563;
+  --neutral-700: #374151;
+  --neutral-800: #1f2937;
+  --neutral-900: #111827;
+
+  /* Tipografia */
+  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-family-mono: 'JetBrains Mono', monospace;
+
+  --font-size-xs: 0.75rem;   /* 12px */
+  --font-size-sm: 0.875rem;  /* 14px */
+  --font-size-base: 1rem;    /* 16px */
+  --font-size-lg: 1.125rem;  /* 18px */
+  --font-size-xl: 1.25rem;   /* 20px */
+  --font-size-2xl: 1.5rem;   /* 24px */
+  --font-size-3xl: 1.875rem; /* 30px */
+  --font-size-4xl: 2.25rem;  /* 36px */
+
+  /* Espacamento (base 4px) */
+  --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 */
+
+  /* Border Radius */
+  --radius-sm: 0.25rem;  /* 4px */
+  --radius-md: 0.5rem;   /* 8px */
+  --radius-lg: 0.75rem;  /* 12px */
+  --radius-xl: 1rem;     /* 16px */
+  --radius-full: 9999px;
+
+  /* Sombras */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+
+  /* Transicoes */
+  --transition-fast: 150ms ease;
+  --transition-normal: 300ms ease;
+  --transition-slow: 500ms ease;
+
+  /* Z-Index */
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+
+
+/* ===========================================================================
+   SECAO 100-199: RESET E BASE STYLES
+   =========================================================================== */
+
+/* ... */
+
+
+/* ===========================================================================
+   SECAO 200-299: TIPOGRAFIA
+   =========================================================================== */
+
+/* ... */
+
+
+/* ===========================================================================
+   SECAO 300-399: LAYOUT E CONTAINERS
+   =========================================================================== */
+
+.page-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-content {
+  flex: 1;
+  padding: var(--space-6);
+}
+
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 var(--space-4);
+}
+
+
+/* ===========================================================================
+   SECAO 400-499: COMPONENTES BASE
+   =========================================================================== */
+
+/* Botoes */
+.btn-primary { /* ... */ }
+.btn-secondary { /* ... */ }
+
+/* Cards */
+.card { /* ... */ }
+.card-premium { /* ... */ }
+
+/* Inputs */
+.input { /* ... */ }
+
+
+/* ===========================================================================
+   SECAO 500-599: COMPONENTES COMPOSTOS
+   =========================================================================== */
+
+/* Forms */
+.form-group { /* ... */ }
+.form-label { /* ... */ }
+
+/* Tables */
+.data-table { /* ... */ }
+
+
+/* ===========================================================================
+   SECAO 600-699: NAVEGACAO
+   =========================================================================== */
+
+.page-header-nav { /* ... */ }
+.page-footer { /* ... */ }
+.sidebar { /* ... */ }
+
+
+/* ===========================================================================
+   SECAO 700-799: PAGINAS ESPECIFICAS
+   =========================================================================== */
+
+/* Home */
+.home-hero { /* ... */ }
+.home-features { /* ... */ }
+
+/* Checkout */
+.checkout-form { /* ... */ }
+.checkout-summary { /* ... */ }
+
+
+/* ===========================================================================
+   SECAO 800-849: MODAIS E OVERLAYS
+   =========================================================================== */
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: var(--z-modal-backdrop);
+}
+
+.modal-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: var(--z-modal);
+}
+
+
+/* ===========================================================================
+   SECAO 850-899: ANIMACOES E KEYFRAMES
+   =========================================================================== */
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-slideInUp {
+  animation: slideInUp var(--transition-normal) forwards;
+}
+
+.animate-scaleIn {
+  animation: scaleIn var(--transition-fast) forwards;
+}
+
+/* Stagger delays para animacoes em sequencia */
+.stagger-1 { animation-delay: 0.1s; }
+.stagger-2 { animation-delay: 0.2s; }
+.stagger-3 { animation-delay: 0.3s; }
+.stagger-4 { animation-delay: 0.4s; }
+.stagger-5 { animation-delay: 0.5s; }
+
+
+/* ===========================================================================
+   SECAO 900-949: RESPONSIVO E MEDIA QUERIES
+   =========================================================================== */
+
+@media (max-width: 768px) {
+  /* Tablet e Mobile */
+}
+
+@media (max-width: 480px) {
+  /* Mobile */
+}
+
+
+/* ===========================================================================
+   SECAO 950-979: UTILITIES E HELPERS
+   =========================================================================== */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+
+/* ===========================================================================
+   SECAO 980-989: OVERRIDES DE FLUENT UI / MUDBLAZOR
+   =========================================================================== */
+
+/* Fluent UI overrides */
+.fluent-card {
+  /* Customizacoes */
+}
+
+
+/* ===========================================================================
+   SECAO 990-999: HOTFIXES E TEMPORARIOS
+   =========================================================================== */
+
+/* TODO: Remover apos fix no componente X */
+```
+
+## Uso
+
+1. Copie o header para o inicio do seu `design-system.css`
+2. Substitua `{PROJECT_NAME}` pelo nome do seu projeto
+3. Adicione suas classes CSS nas secoes apropriadas
+4. Mantenha o indice atualizado conforme adiciona novas secoes
+
+## Beneficios
+
+- **Navegacao rapida:** Use Ctrl+G (go to line) para pular para secoes
+- **Organizacao clara:** Cada tipo de componente em sua secao
+- **Facil manutencao:** Encontre onde adicionar novos estilos
+- **Evita conflitos:** Prefixos por pagina previnem colisoes
+
+---
+
+*Template MORPH-SPEC by Polymorphism Tech*