// DragonX Wallet - ImGui Edition // Copyright 2024-2026 The Hush Developers // Released under the GPLv3 #pragma once // ============================================================================ // Material Design 2 - Complete UI System // ============================================================================ // Based on https://m2.material.io/design/foundation-overview // // This header provides the complete Material Design 2 implementation for // the DragonX Wallet ImGui interface. // // Namespace: dragonx::ui::material // Foundation #include "color_theme.h" // ColorTheme struct, theme presets #include "colors.h" // Color accessor functions #include "typography.h" // Typography system, type scale #include "layout.h" // Spacing grid, breakpoints, sizes // Effects #include "elevation.h" // Shadow rendering, elevation animation #include "ripple.h" // Touch ripple effect #include "draw_helpers.h" // DrawTextShadow, DrawGlassPanel // Motion #include "motion.h" // Easing curves, AnimatedValue, StaggerAnimation #include "transitions.h" // View transitions, FadeTransition, ExpandableSection // Layout #include "app_layout.h" // Application layout manager // Components #include "components/components.h" // All Material components // ============================================================================ // Quick Start Guide // ============================================================================ // // 1. INITIALIZATION // In your app startup, initialize the material system: // // ```cpp // using namespace dragonx::ui::material; // // // Initialize color theme (creates global theme) // SetDragonXTheme(); // or SetHushTheme() for HUSH variant // // // Initialize typography (load fonts) // Typography::instance().initialize(io); // ``` // // 2. FRAME SETUP // At the start of each frame: // // ```cpp // // Update ripple animations // UpdateRipples(); // ``` // // 3. USING COLORS // Access theme colors with helper functions: // // ```cpp // ImU32 bg = Background(); // App background // ImU32 primary = Primary(); // Brand color // ImU32 cardBg = Surface(Elevation::Dp4); // Elevated surface // ImU32 text = OnSurface(); // Text on surfaces // ``` // // 4. USING TYPOGRAPHY // Render text with the type scale: // // ```cpp // Typography::instance().text(TypeStyle::H6, "Section Title"); // Typography::instance().text(TypeStyle::Body1, "Body text here..."); // Typography::instance().textColored(TypeStyle::Caption, OnSurfaceMedium(), "Hint"); // ``` // // 5. USING COMPONENTS // Components follow Material Design patterns: // // ```cpp // // Buttons // if (ContainedButton("Send")) { ... } // if (OutlinedButton("Cancel")) { ... } // if (TextButton("Learn More")) { ... } // // // Cards // BeginCard(myCardSpec); // CardHeader("Card Title", "Subtitle"); // CardContent("Card body content..."); // CardActions(); // TextButton("Action 1"); // TextButton("Action 2"); // CardActionsEnd(); // EndCard(); // // // Lists // BeginList("myList"); // if (ListItem("Item 1")) { ... } // if (ListItem("Item 2", "Secondary text")) { ... } // ListDivider(); // if (ListItem("Item 3")) { ... } // EndList(); // // // Dialogs // static bool showDialog = false; // if (ContainedButton("Open Dialog")) showDialog = true; // int result = ConfirmDialog("confirm", &showDialog, "Confirm", // "Are you sure?", "Yes", "No"); // ``` // // 6. LAYOUT // Use the spacing system for consistent layouts: // // ```cpp // ImGui::Dummy(ImVec2(0, spacing::dp(2))); // 16dp vertical space // ImGui::SetCursorPosX(spacing::dp(3)); // 24dp indent // ``` // // ============================================================================ // Module Reference // ============================================================================ // // COLORS (colors.h) // Primary(), PrimaryVariant(), PrimaryContainer() // Secondary(), SecondaryVariant() // Background(), Surface(elevation), SurfaceVariant() // OnPrimary(), OnSecondary(), OnBackground(), OnSurface() // OnSurfaceMedium(), OnSurfaceDisabled() // Error(), OnError() // StateHover(), StateFocus(), StatePressed(), StateSelected() // // TYPOGRAPHY (typography.h) // TypeStyle: H1-H6, Subtitle1-2, Body1-2, Button, Caption, Overline // Typography::text(style, text) // Typography::textColored(style, color, text) // Typography::textWrapped(style, text) // Typography::pushFont(style) / popFont() // // LAYOUT (layout.h) // spacing::dp(n) - n * 8dp // spacing::Unit - 8dp // size::TouchTarget - 48dp // size::ButtonHeight - 36dp // breakpoint::current() - Get current breakpoint // // ELEVATION (elevation.h) // DrawShadow(drawList, rect, elevationDp, cornerRadius) // ElevationAnimator - Smooth elevation transitions // // RIPPLE (ripple.h) // DrawRippleEffect(drawList, rect, id, cornerRadius, hovered, held) // UpdateRipples() - Call each frame // // COMPONENTS (components/components.h) // See components.h for full component reference