Files
ObsidianDragon/src/ui/material/colors.h
T
DanSandClaude Opus 4.8 e24ca015d1 feat(ui): implement UI/UX audit — i18n, HiDPI, theme, destructive-action & overflow fixes
Implements all 26 confirmed UI/UX audit findings plus the 4 dashboard/timeline
tile labels. Verified across full-node + Lite + Windows builds (ctest green) and
an adversarial diff review (one market-tab delete regression caught + fixed).

i18n coverage:
- Balance hero/quick-actions/toasts + dashboard & timeline tiles (Total Balance,
  Shielded, Transparent, Quick Send, Quick Receive, Click to open, Market)
- Send: Review Send / Cancel / Paste / view-only tooltip / memo byte counter
- Settings: Lite lifecycle errors, plaintext-RPC security warning, 8 toasts
- Mining pool-payout tooltip
- Resolve daemon_update_title double-assignment collision (new daemon_update_prompt_title)
- 23 new keys translated into all 8 locales; CJK subset font rebuilt

HiDPI: DPI-scale the Send amount bar, mining thread-tile clamp bounds, receive
loading skeleton, and sidebar notification-badge insets.

Light theme: theme-aware material::SurfaceOverlay() for balance bar tracks and
row-hover highlights; contacts active-pill foreground uses OnPrimary().

Destructive actions: arm/confirm for portfolio-group delete, saved pool/worker
remove, and avatar-image delete.

Interaction/overflow: route balance star/eye buttons and the console fold-toggle
through popup-safe guards; clip peer addr/subver; truncate the balance custom
label; measure Settings tool-button widths; mining stepper disabled-state
feedback; +/- stepper buttons restyled to match the thread tiles.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-18 17:54:15 -05:00

222 lines
8.0 KiB
C++

// DragonX Wallet - ImGui Edition
// Copyright 2024-2026 The Hush Developers
// Released under the GPLv3
// ============================================================================
// Material Design Color Tokens
// ============================================================================
//
// This header provides convenient access to Material Design color tokens.
// Use these instead of hardcoded colors to maintain theme consistency.
//
// Usage:
// #include "ui/material/colors.h"
//
// // Get surface colors at different elevations
// ImU32 cardBg = dragonx::ui::material::Surface(4); // 4dp elevation
//
// // Get state colors
// ImU32 hovered = dragonx::ui::material::Primary() | dragonx::ui::material::StateHover();
//
// // Use in ImGui
// ImGui::PushStyleColor(ImGuiCol_ChildBg, ImGui::ColorConvertU32ToFloat4(cardBg));
#pragma once
#include "color_theme.h"
#include "../schema/ui_schema.h"
namespace dragonx {
namespace ui {
namespace material {
// ============================================================================
// Color Token Accessors (Inline for performance)
// ============================================================================
// Primary colors
inline ImU32 Primary() { return GetCurrentColorTheme().primary; }
inline ImU32 PrimaryVariant() { return GetCurrentColorTheme().primaryVariant; }
inline ImU32 PrimaryLight() { return GetCurrentColorTheme().primaryLight; }
// Secondary colors
inline ImU32 Secondary() { return GetCurrentColorTheme().secondary; }
inline ImU32 SecondaryVariant() { return GetCurrentColorTheme().secondaryVariant; }
inline ImU32 SecondaryLight() { return GetCurrentColorTheme().secondaryLight; }
// Surface colors (semi-transparent when OS backdrop is active)
inline ImU32 Background() {
ImU32 bg = GetCurrentColorTheme().background;
if (!IsBackdropActive()) return bg;
float alpha = dragonx::ui::schema::UI().drawElement("backdrop", "background-inline-alpha").size;
if (alpha < 0) alpha = 0.30f;
return WithAlphaF(bg, alpha);
}
inline ImU32 Surface() {
ImU32 s = GetCurrentColorTheme().surface;
if (!IsBackdropActive()) return s;
float alpha = dragonx::ui::schema::UI().drawElement("backdrop", "surface-inline-alpha").size;
if (alpha < 0) alpha = 0.55f;
return WithAlphaF(s, alpha);
}
inline ImU32 SurfaceVariant() { return GetCurrentColorTheme().surfaceVariant; }
// Elevated surfaces - use for cards, dialogs, menus
inline ImU32 Surface(int dp) {
ImU32 s = GetElevatedSurface(GetCurrentColorTheme(), dp);
if (!IsBackdropActive()) return s;
float alpha = dragonx::ui::schema::UI().drawElement("backdrop", "surface-inline-alpha").size;
if (alpha < 0) alpha = 0.55f;
return WithAlphaF(s, alpha);
}
inline ImU32 SurfaceAt(Elevation level) { return GetElevatedSurface(GetCurrentColorTheme(), level); }
// "On" colors (text on various backgrounds)
inline ImU32 OnPrimary() { return GetCurrentColorTheme().onPrimary; }
inline ImU32 OnSecondary() { return GetCurrentColorTheme().onSecondary; }
inline ImU32 OnBackground() { return GetCurrentColorTheme().onBackground; }
inline ImU32 OnSurface() { return GetCurrentColorTheme().onSurface; }
inline ImU32 OnSurfaceMedium() { return GetCurrentColorTheme().onSurfaceMedium; }
inline ImU32 OnSurfaceDisabled() { return GetCurrentColorTheme().onSurfaceDisabled; }
// Semantic colors
inline ImU32 Error() { return GetCurrentColorTheme().error; }
inline ImU32 OnError() { return GetCurrentColorTheme().onError; }
inline ImU32 Success() { return GetCurrentColorTheme().success; }
inline ImU32 OnSuccess() { return GetCurrentColorTheme().onSuccess; }
inline ImU32 Warning() { return GetCurrentColorTheme().warning; }
inline ImU32 OnWarning() { return GetCurrentColorTheme().onWarning; }
// State overlay colors (use with BlendOverlay)
inline ImU32 StateHover() { return GetCurrentColorTheme().stateHover; }
inline ImU32 StateFocus() { return GetCurrentColorTheme().stateFocus; }
inline ImU32 StatePressed() { return GetCurrentColorTheme().statePressed; }
inline ImU32 StateSelected() { return GetCurrentColorTheme().stateSelected; }
inline ImU32 StateDragged() { return GetCurrentColorTheme().stateDragged; }
// UI structure
inline ImU32 Divider() { return GetCurrentColorTheme().divider; }
inline ImU32 Outline() { return GetCurrentColorTheme().outline; }
inline ImU32 Scrim() { return GetCurrentColorTheme().scrim; }
// ============================================================================
// ImVec4 Variants (for direct use with ImGui style colors)
// ============================================================================
inline ImVec4 PrimaryVec4() { return ImGui::ColorConvertU32ToFloat4(Primary()); }
inline ImVec4 SecondaryVec4() { return ImGui::ColorConvertU32ToFloat4(Secondary()); }
inline ImVec4 SurfaceVec4() { return ImGui::ColorConvertU32ToFloat4(Surface()); }
inline ImVec4 SurfaceVec4(int dp) { return ImGui::ColorConvertU32ToFloat4(Surface(dp)); }
inline ImVec4 OnSurfaceVec4() { return ImGui::ColorConvertU32ToFloat4(OnSurface()); }
inline ImVec4 ErrorVec4() { return ImGui::ColorConvertU32ToFloat4(Error()); }
inline ImVec4 SuccessVec4() { return ImGui::ColorConvertU32ToFloat4(Success()); }
inline ImVec4 WarningVec4() { return ImGui::ColorConvertU32ToFloat4(Warning()); }
// ============================================================================
// Convenience Functions for Common Patterns
// ============================================================================
/**
* @brief Theme-aware translucent overlay for tracks / hover fills / dividers.
*
* A raw white overlay (IM_COL32(255,255,255,a)) reads on dark skins but vanishes
* on light/pastel skins (white-on-white). This picks a dark overlay on light
* themes and a white overlay on dark themes so the alpha reads either way.
* (Self-contained luminance check so colors.h stays free of draw_helpers.h.)
*
* @param alpha 0-255 opacity of the overlay
*/
inline ImU32 SurfaceOverlay(int alpha)
{
ImU32 bg = Background();
float r = ((bg >> IM_COL32_R_SHIFT) & 0xFF) / 255.0f;
float g = ((bg >> IM_COL32_G_SHIFT) & 0xFF) / 255.0f;
float b = ((bg >> IM_COL32_B_SHIFT) & 0xFF) / 255.0f;
bool light = (0.299f * r + 0.587f * g + 0.114f * b) > 0.5f;
return light ? IM_COL32(0, 0, 0, alpha) : IM_COL32(255, 255, 255, alpha);
}
/**
* @brief Get color with applied state overlay
*
* @param base Base color
* @param state State overlay (StateHover, StateFocus, etc.)
* @return Color with state applied
*
* Usage:
* ImU32 hoveredButton = WithState(Primary(), StateHover());
*/
inline ImU32 WithState(ImU32 base, ImU32 state)
{
return BlendOverlay(base, state, 1.0f);
}
/**
* @brief Get button color for current state
*
* @param isHovered Button is hovered
* @param isActive Button is pressed
* @return Appropriate button color
*/
inline ImU32 ButtonColor(bool isHovered, bool isActive)
{
if (isActive) return WithState(Primary(), StatePressed());
if (isHovered) return WithState(Primary(), StateHover());
return Primary();
}
/**
* @brief Get surface color for card at specified elevation
*
* @param elevation Elevation in dp (0-24)
* @return Surface color with elevation overlay
*/
inline ImU32 CardSurface(int elevation = 2)
{
return Surface(elevation);
}
/**
* @brief Get surface color for dialog/modal
*
* @return Surface color at 24dp elevation
*/
inline ImU32 DialogSurface()
{
return SurfaceAt(Elevation::Dp24);
}
/**
* @brief Get surface color for menu/popup
*
* @return Surface color at 8dp elevation
*/
inline ImU32 MenuSurface()
{
return SurfaceAt(Elevation::Dp8);
}
/**
* @brief Get surface color for app bar/toolbar
*
* @return Surface color at 4dp elevation
*/
inline ImU32 AppBarSurface()
{
return SurfaceAt(Elevation::Dp4);
}
/**
* @brief Get surface color for nav drawer
*
* @return Surface color at 16dp elevation
*/
inline ImU32 NavDrawerSurface()
{
return SurfaceAt(Elevation::Dp16);
}
} // namespace material
} // namespace ui
} // namespace dragonx