@polymorphism-tech/morph-spec 4.3.3 → 4.3.4

package/framework/templates/ui/FluentDesignTheme.cs

@@ -0,0 +1,149 @@
+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/framework/templates/ui/MudTheme.cs

@@ -0,0 +1,281 @@
+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/framework/templates/ui/design-system.css

@@ -0,0 +1,226 @@
+/**
+ * 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
+ * ======================================== */