@polymorphism-tech/morph-spec 4.5.0 → 4.7.0

package/.morph/framework/templates/ui/FluentDesignTheme.cs

@@ -1,149 +0,0 @@
-using Microsoft.FluentUI.AspNetCore.Components;
-
-namespace {Namespace}.Themes;
-
-/// <summary>
-/// Fluent UI Design Theme customizado para {Project Name}.
-/// Gerado automaticamente baseado em ui-design-system.md
-/// </summary>
-/// <remarks>
-/// Template MORPH-SPEC v2.1.1 by Polymorphism Tech
-/// </remarks>
-public static class FluentDesignTheme
-{
-    /// <summary>
-    /// Paleta de cores do tema
-    /// </summary>
-    public static DesignThemePalette GetPalette() => new()
-    {
-        // Cores Principais
-        Primary = "#{hex da cor primária}",        // Ex: #3b82f6
-        Secondary = "#{hex da cor secundária}",    // Ex: #6b7280
-
-        // Cores de Estado
-        Success = "#{hex}",   // Ex: #10b981
-        Error = "#{hex}",     // Ex: #ef4444
-        Warning = "#{hex}",   // Ex: #f59e0b
-        Info = "#{hex}",      // Ex: #06b6d4
-
-        // Neutros
-        NeutralLight = "#{hex do gray-50}",        // Ex: #f9fafb
-        NeutralLighter = "#{hex do gray-100}",     // Ex: #f3f4f6
-        NeutralDark = "#{hex do gray-800}",        // Ex: #1f2937
-        NeutralDarker = "#{hex do gray-900}",      // Ex: #111827
-
-        // Background e Foreground
-        Background = "#ffffff",
-        Foreground = "#{hex do gray-900}",         // Texto principal
-
-        // Accent (geralmente = Primary)
-        Accent = "#{hex da cor primária}",
-    };
-
-    /// <summary>
-    /// Configuração de tipografia
-    /// </summary>
-    public static DesignThemeTypography GetTypography() => new()
-    {
-        FontFamily = "'{Font Name}', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-
-        // Tamanhos
-        FontSizeBase = "1rem",       // 16px
-        FontSizeSmall = "0.875rem",  // 14px
-        FontSizeLarge = "1.125rem",  // 18px
-
-        // Weights
-        FontWeightRegular = 400,
-        FontWeightSemibold = 600,
-        FontWeightBold = 700,
-
-        // Line Heights
-        LineHeightBase = 1.5,
-    };
-
-    /// <summary>
-    /// Configuração de espaçamento e layout
-    /// </summary>
-    public static DesignThemeLayout GetLayout() => new()
-    {
-        // Espaçamento (baseado em múltiplos de {base}px - ex: 4px)
-        SpacingBase = "0.25rem",  // 4px
-        SpacingSmall = "0.5rem",  // 8px
-        SpacingMedium = "1rem",   // 16px
-        SpacingLarge = "1.5rem",  // 24px
-
-        // Border Radius
-        BorderRadiusSmall = "0.125rem",  // 2px
-        BorderRadiusMedium = "0.375rem", // 6px
-        BorderRadiusLarge = "0.5rem",    // 8px
-
-        // Shadows (depende da biblioteca - ajustar conforme API)
-        Elevation1 = "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-        Elevation2 = "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
-        Elevation3 = "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
-    };
-
-    /// <summary>
-    /// Aplica o tema customizado ao FluentUI
-    /// </summary>
-    /// <param name="services">Service collection</param>
-    public static void AddFluentUIWithCustomTheme(this IServiceCollection services)
-    {
-        services.AddFluentUIComponents(options =>
-        {
-            // Aplicar paleta customizada
-            options.DesignThemePalette = GetPalette();
-
-            // Outras configurações do Fluent UI
-            // ...
-        });
-    }
-}
-
-/// <summary>
-/// Classe de configuração de tipografia
-/// (Ajustar conforme API do Fluent UI Blazor v4.x)
-/// </summary>
-public class DesignThemeTypography
-{
-    public string FontFamily { get; set; } = string.Empty;
-    public string FontSizeBase { get; set; } = string.Empty;
-    public string FontSizeSmall { get; set; } = string.Empty;
-    public string FontSizeLarge { get; set; } = string.Empty;
-    public int FontWeightRegular { get; set; }
-    public int FontWeightSemibold { get; set; }
-    public int FontWeightBold { get; set; }
-    public double LineHeightBase { get; set; }
-}
-
-/// <summary>
-/// Classe de configuração de layout
-/// (Ajustar conforme API do Fluent UI Blazor v4.x)
-/// </summary>
-public class DesignThemeLayout
-{
-    public string SpacingBase { get; set; } = string.Empty;
-    public string SpacingSmall { get; set; } = string.Empty;
-    public string SpacingMedium { get; set; } = string.Empty;
-    public string SpacingLarge { get; set; } = string.Empty;
-
-    public string BorderRadiusSmall { get; set; } = string.Empty;
-    public string BorderRadiusMedium { get; set; } = string.Empty;
-    public string BorderRadiusLarge { get; set; } = string.Empty;
-
-    public string Elevation1 { get; set; } = string.Empty;
-    public string Elevation2 { get; set; } = string.Empty;
-    public string Elevation3 { get; set; } = string.Empty;
-}
-
-/// <summary>
-/// EXEMPLO DE USO:
-///
-/// // Program.cs
-/// builder.Services.AddFluentUIWithCustomTheme();
-///
-/// // App.razor ou MainLayout.razor
-/// <FluentDesignTheme Mode="DesignThemeMode.Light" />
-///
-/// // Componentes podem acessar cores via CSS variables ou propriedades do tema
-/// </summary>

package/.morph/framework/templates/ui/MudTheme.cs

@@ -1,281 +0,0 @@
-using MudBlazor;
-
-namespace {Namespace}.Themes;
-
-/// <summary>
-/// MudBlazor Theme customizado para {Project Name}.
-/// Gerado automaticamente baseado em ui-design-system.md
-/// </summary>
-/// <remarks>
-/// Template MORPH-SPEC v2.1.1 by Polymorphism Tech
-/// </remarks>
-public static class AppTheme
-{
-    /// <summary>
-    /// Tema Light Mode
-    /// </summary>
-    public static MudTheme LightTheme => new()
-    {
-        Palette = new PaletteLight
-        {
-            // Cores Principais
-            Primary = "#{hex da cor primária}",        // Ex: #3b82f6
-            Secondary = "#{hex da cor secundária}",    // Ex: #6b7280
-            Tertiary = "#{hex da cor terciária}",      // Opcional
-
-            // Cores de Estado
-            Success = "#{hex}",   // Ex: #10b981
-            Error = "#{hex}",     // Ex: #ef4444
-            Warning = "#{hex}",   // Ex: #f59e0b
-            Info = "#{hex}",      // Ex: #06b6d4
-
-            // Background e Superfícies
-            Background = "#ffffff",
-            BackgroundGrey = "#{hex do gray-50}",      // Ex: #f9fafb
-            Surface = "#ffffff",
-
-            // Text Colors
-            TextPrimary = "#{hex do gray-900}",        // Texto principal
-            TextSecondary = "#{hex do gray-600}",      // Texto secundário
-            TextDisabled = "#{hex do gray-400}",       // Texto desabilitado
-
-            // Borders
-            Divider = "#{hex do gray-200}",            // Divisores
-            DividerLight = "#{hex do gray-100}",       // Divisores mais claros
-            Lines = "#{hex do gray-300}",              // Linhas de borda
-
-            // Action colors (usados em botões, links, etc)
-            ActionDefault = "#{hex do gray-500}",
-            ActionDisabled = "#{hex do gray-300}",
-            ActionDisabledBackground = "#{hex do gray-100}",
-
-            // Outros
-            Dark = "#{hex do gray-800}",
-            DarkLighten = "#{hex do gray-700}",
-            DarkDarken = "#{hex do gray-900}",
-
-            // Overlay (usado em modais, dropdowns)
-            OverlayLight = "rgba(255, 255, 255, 0.95)",
-            OverlayDark = "rgba(33, 33, 33, 0.95)",
-
-            // Hover effects
-            HoverOpacity = 0.06,  // Opacidade do hover (6%)
-        },
-
-        Typography = new Typography
-        {
-            // Font Families
-            Default = new Default
-            {
-                FontFamily = new[] { "{Font Name}", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "sans-serif" },
-                FontSize = "1rem",          // 16px
-                FontWeight = 400,           // Regular
-                LineHeight = 1.5,
-                LetterSpacing = "normal",
-            },
-
-            H1 = new H1
-            {
-                FontFamily = new[] { "{Font Name}", "sans-serif" },
-                FontSize = "2.25rem",    // 36px
-                FontWeight = 700,        // Bold
-                LineHeight = 1.2,
-            },
-
-            H2 = new H2
-            {
-                FontFamily = new[] { "{Font Name}", "sans-serif" },
-                FontSize = "1.875rem",   // 30px
-                FontWeight = 700,
-                LineHeight = 1.3,
-            },
-
-            H3 = new H3
-            {
-                FontFamily = new[] { "{Font Name}", "sans-serif" },
-                FontSize = "1.5rem",     // 24px
-                FontWeight = 600,
-                LineHeight = 1.4,
-            },
-
-            H4 = new H4
-            {
-                FontFamily = new[] { "{Font Name}", "sans-serif" },
-                FontSize = "1.25rem",    // 20px
-                FontWeight = 600,
-                LineHeight = 1.4,
-            },
-
-            H5 = new H5
-            {
-                FontFamily = new[] { "{Font Name}", "sans-serif" },
-                FontSize = "1.125rem",   // 18px
-                FontWeight = 600,
-                LineHeight = 1.5,
-            },
-
-            H6 = new H6
-            {
-                FontFamily = new[] { "{Font Name}", "sans-serif" },
-                FontSize = "1rem",       // 16px
-                FontWeight = 600,
-                LineHeight = 1.5,
-            },
-
-            Body1 = new Body1
-            {
-                FontFamily = new[] { "{Font Name}", "sans-serif" },
-                FontSize = "1rem",       // 16px
-                FontWeight = 400,
-                LineHeight = 1.5,
-            },
-
-            Body2 = new Body2
-            {
-                FontFamily = new[] { "{Font Name}", "sans-serif" },
-                FontSize = "0.875rem",   // 14px
-                FontWeight = 400,
-                LineHeight = 1.43,
-            },
-
-            Button = new Button
-            {
-                FontFamily = new[] { "{Font Name}", "sans-serif" },
-                FontSize = "0.875rem",   // 14px
-                FontWeight = 600,        // Semibold
-                LineHeight = 1.75,
-                TextTransform = "none",  // Ou "uppercase" se preferir
-            },
-
-            Caption = new Caption
-            {
-                FontFamily = new[] { "{Font Name}", "sans-serif" },
-                FontSize = "0.75rem",    // 12px
-                FontWeight = 400,
-                LineHeight = 1.66,
-            },
-
-            Subtitle1 = new Subtitle1
-            {
-                FontFamily = new[] { "{Font Name}", "sans-serif" },
-                FontSize = "1rem",
-                FontWeight = 500,        // Medium
-                LineHeight = 1.75,
-            },
-
-            Subtitle2 = new Subtitle2
-            {
-                FontFamily = new[] { "{Font Name}", "sans-serif" },
-                FontSize = "0.875rem",
-                FontWeight = 500,
-                LineHeight = 1.57,
-            },
-
-            Overline = new Overline
-            {
-                FontFamily = new[] { "{Font Name}", "sans-serif" },
-                FontSize = "0.75rem",
-                FontWeight = 600,
-                LineHeight = 2.66,
-                LetterSpacing = "0.08em",
-            },
-        },
-
-        Shadows = new Shadow
-        {
-            Elevation = new[]
-            {
-                "none",  // 0
-                "0 1px 2px 0 rgba(0, 0, 0, 0.05)",                                                      // 1
-                "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",               // 2
-                "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",             // 3
-                "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",           // 4
-                "0 25px 50px -12px rgba(0, 0, 0, 0.25)",                                                // 5
-                // Adicione mais elevações conforme necessário
-            }
-        },
-
-        LayoutProperties = new LayoutProperties
-        {
-            // Border Radius
-            DefaultBorderRadius = "6px",  // md
-
-            // Drawer
-            DrawerWidthLeft = "240px",
-            DrawerWidthRight = "240px",
-
-            // AppBar
-            AppbarHeight = "64px",
-        },
-
-        ZIndex = new ZIndex
-        {
-            Drawer = 1200,
-            AppBar = 1100,
-            Dialog = 1300,
-            Popover = 1400,
-            Snackbar = 1500,
-            Tooltip = 1600,
-        },
-    };
-
-    /// <summary>
-    /// Tema Dark Mode (opcional - ajustar cores)
-    /// </summary>
-    public static MudTheme DarkTheme => new()
-    {
-        Palette = new PaletteDark
-        {
-            // Cores Principais (ajustar para dark mode)
-            Primary = "#{hex}",
-            Secondary = "#{hex}",
-
-            // Cores de Estado
-            Success = "#{hex}",
-            Error = "#{hex}",
-            Warning = "#{hex}",
-            Info = "#{hex}",
-
-            // Background e Superfícies (tons escuros)
-            Background = "#{hex do gray-900}",
-            BackgroundGrey = "#{hex do gray-800}",
-            Surface = "#{hex do gray-800}",
-
-            // Text Colors (invertidos)
-            TextPrimary = "#{hex do gray-50}",
-            TextSecondary = "#{hex do gray-400}",
-            TextDisabled = "#{hex do gray-600}",
-
-            // Etc... (ajustar conforme design system dark mode)
-        },
-
-        // Compartilhar Typography e outras configurações do LightTheme
-        Typography = LightTheme.Typography,
-        Shadows = LightTheme.Shadows,
-        LayoutProperties = LightTheme.LayoutProperties,
-        ZIndex = LightTheme.ZIndex,
-    };
-}
-
-/// <summary>
-/// EXEMPLO DE USO:
-///
-/// // Program.cs
-/// builder.Services.AddMudServices(config =>
-/// {
-///     config.SnackbarConfiguration.PositionClass = Defaults.Classes.Position.BottomRight;
-/// });
-///
-/// // App.razor ou MainLayout.razor
-/// <MudThemeProvider Theme="@AppTheme.LightTheme" />
-/// <MudDialogProvider />
-/// <MudSnackbarProvider />
-///
-/// // Para suportar dark mode dinâmico:
-/// <MudThemeProvider @bind-IsDarkMode="@_isDarkMode"
-///                  Theme="@(_isDarkMode ? AppTheme.DarkTheme : AppTheme.LightTheme)" />
-///
-/// @code {
-///     private bool _isDarkMode;
-/// }
-/// </summary>

package/.morph/framework/templates/ui/design-system.css

@@ -1,226 +0,0 @@
-/**
- * Design System - {Project Name}
- *
- * CSS Variables generated from ui-design-system.md
- * Use estas variáveis em todo o projeto para manter consistência visual.
- *
- * Template MORPH-SPEC v2.1.1 by Polymorphism Tech
- */
-
-:root {
-  /* ========================================
-   * CORES PRINCIPAIS
-   * ======================================== */
-
-  --color-primary: #{hex da cor primária};
-  --color-primary-hover: #{hex da cor primária mais escura};
-  --color-primary-active: #{hex da cor primária ainda mais escura};
-
-  --color-secondary: #{hex da cor secundária};
-  --color-secondary-hover: #{hex};
-  --color-secondary-active: #{hex};
-
-  /* ========================================
-   * CORES DE ESTADO
-   * ======================================== */
-
-  --color-success: #{hex};
-  --color-success-bg: #{hex com transparência ou shade mais claro};
-  --color-success-border: #{hex};
-
-  --color-error: #{hex};
-  --color-error-bg: #{hex};
-  --color-error-border: #{hex};
-
-  --color-warning: #{hex};
-  --color-warning-bg: #{hex};
-  --color-warning-border: #{hex};
-
-  --color-info: #{hex};
-  --color-info-bg: #{hex};
-  --color-info-border: #{hex};
-
-  /* ========================================
-   * ESCALA DE NEUTROS (Cinzas)
-   * ======================================== */
-
-  --color-gray-50: #{hex};
-  --color-gray-100: #{hex};
-  --color-gray-200: #{hex};
-  --color-gray-300: #{hex};
-  --color-gray-400: #{hex};
-  --color-gray-500: #{hex};
-  --color-gray-600: #{hex};
-  --color-gray-700: #{hex};
-  --color-gray-800: #{hex};
-  --color-gray-900: #{hex};
-
-  /* ========================================
-   * TIPOGRAFIA - FONTES
-   * ======================================== */
-
-  --font-sans: '{Font Name}', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-  --font-serif: '{Font Name}', Georgia, 'Times New Roman', serif;
-  --font-mono: '{Font Name}', 'Fira Code', 'Courier New', Consolas, monospace;
-
-  /* ========================================
-   * TIPOGRAFIA - TAMANHOS
-   * ======================================== */
-
-  --text-xs: 0.75rem;      /* 12px */
-  --text-sm: 0.875rem;     /* 14px */
-  --text-base: 1rem;       /* 16px */
-  --text-lg: 1.125rem;     /* 18px */
-  --text-xl: 1.25rem;      /* 20px */
-  --text-2xl: 1.5rem;      /* 24px */
-  --text-3xl: 1.875rem;    /* 30px */
-  --text-4xl: 2.25rem;     /* 36px */
-  --text-5xl: 3rem;        /* 48px */
-
-  /* ========================================
-   * TIPOGRAFIA - LINE HEIGHTS
-   * ======================================== */
-
-  --leading-none: 1;
-  --leading-tight: 1.25;
-  --leading-snug: 1.375;
-  --leading-normal: 1.5;
-  --leading-relaxed: 1.625;
-  --leading-loose: 2;
-
-  /* ========================================
-   * TIPOGRAFIA - FONT WEIGHTS
-   * ======================================== */
-
-  --font-light: 300;
-  --font-regular: 400;
-  --font-medium: 500;
-  --font-semibold: 600;
-  --font-bold: 700;
-  --font-extrabold: 800;
-
-  /* ========================================
-   * ESPAÇAMENTO
-   * Baseado em múltiplos de {base}px (ex: 4px)
-   * ======================================== */
-
-  --space-0: 0;
-  --space-1: 0.25rem;   /* 4px */
-  --space-2: 0.5rem;    /* 8px */
-  --space-3: 0.75rem;   /* 12px */
-  --space-4: 1rem;      /* 16px */
-  --space-5: 1.25rem;   /* 20px */
-  --space-6: 1.5rem;    /* 24px */
-  --space-7: 1.75rem;   /* 28px */
-  --space-8: 2rem;      /* 32px */
-  --space-10: 2.5rem;   /* 40px */
-  --space-12: 3rem;     /* 48px */
-  --space-16: 4rem;     /* 64px */
-  --space-20: 5rem;     /* 80px */
-  --space-24: 6rem;     /* 96px */
-
-  /* ========================================
-   * BORDER RADIUS
-   * ======================================== */
-
-  --rounded-none: 0;
-  --rounded-sm: 0.125rem;   /* 2px */
-  --rounded-md: 0.375rem;   /* 6px */
-  --rounded-lg: 0.5rem;     /* 8px */
-  --rounded-xl: 0.75rem;    /* 12px */
-  --rounded-2xl: 1rem;      /* 16px */
-  --rounded-full: 9999px;
-
-  /* ========================================
-   * SOMBRAS (Shadows)
-   * ======================================== */
-
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-
-  /* ========================================
-   * Z-INDEX LAYERS
-   * ======================================== */
-
-  --z-0: 0;
-  --z-10: 10;
-  --z-20: 20;
-  --z-30: 30;
-  --z-40: 40;
-  --z-50: 50;      /* Modals, dropdowns */
-  --z-100: 100;    /* Tooltips */
-  --z-max: 9999;   /* Toasts, notifications */
-
-  /* ========================================
-   * TRANSITIONS / ANIMATIONS
-   * ======================================== */
-
-  --transition-fast: 150ms ease-in-out;
-  --transition-base: 250ms ease-in-out;
-  --transition-slow: 350ms ease-in-out;
-
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* ========================================
-   * BREAKPOINTS (informativo - usar em media queries)
-   * ======================================== */
-
-  /* @media (min-width: 640px) - sm */
-  /* @media (min-width: 768px) - md */
-  /* @media (min-width: 1024px) - lg */
-  /* @media (min-width: 1280px) - xl */
-  /* @media (min-width: 1536px) - 2xl */
-}
-
-/* ========================================
- * MODO ESCURO (Dark Mode)
- * Opcional - ajuste as cores para dark theme
- * ======================================== */
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    /* Inverter cores conforme necessário */
-    --color-gray-50: #{hex do gray-900};
-    --color-gray-900: #{hex do gray-50};
-    /* ... outras inversões */
-  }
-}
-
-/* ========================================
- * CLASSES UTILITÁRIAS (Exemplo)
- * ======================================== */
-
-/* Exemplo de uso das variáveis */
-.btn-primary {
-  background-color: var(--color-primary);
-  color: white;
-  padding: var(--space-2) var(--space-4);
-  border-radius: var(--rounded-md);
-  font-weight: var(--font-semibold);
-  transition: background-color var(--transition-base);
-}
-
-.btn-primary:hover {
-  background-color: var(--color-primary-hover);
-}
-
-.card {
-  background-color: white;
-  padding: var(--space-6);
-  border-radius: var(--rounded-lg);
-  box-shadow: var(--shadow-md);
-}
-
-.text-muted {
-  color: var(--color-gray-600);
-  font-size: var(--text-sm);
-}
-
-/* ========================================
- * FIM DO DESIGN SYSTEM
- * ======================================== */