Augmented UI & Styling System - Incomplete-Infinity/eve-companion GitHub Wiki

🖼 Augmented UI & Styling System

This page explains the design language and component styling methodology used in the EVE Companion App. The UI blends retro-futuristic visuals with crisp utility, powered by Augmented UI, Halfmoon, and Topcoat.

🎯 Goals

  • Provide immersive, themed interfaces inspired by the four EVE empires
  • Use layered visual elements for depth and separation
  • Create consistent UI structure with reusable panels
  • Enable visual variation without breaking layout consistency

🧩 Core Styling Libraries

Library Purpose
Augmented UI Visual framing, corner effects, layered panel styling
Halfmoon Utility grid and responsive layout system
Topcoat Minimalist styling for inputs, buttons, forms

🎨 Empire Styling Themes

The app includes unique theme profiles for each faction:

Empire Style Description
Amarr Gold, marble, round corners, decorative borders
Caldari Blue-gray, clipped corners, brushed steel texture
Gallente Green, soft scoops, glass-like, eco-aesthetic
Minmatar Brown-red, riveted plates, industrial roughness

Themes use data-ui-empire attributes on <body> or containers.

🔧 Augmented UI Mechanics

Panels and components are styled using data-augmented-ui attributes:

<div data-augmented-ui="tl-clip br-clip inlay border">
  <h3>Fleet Commander</h3>
</div>

Modifiers include:

  • Corners: tl-clip, bl-scoop, br-round, etc.
  • Borders: inlay, border, border-y, etc.
  • Background reset: data-augmented-ui-reset

🧱 Component Standardization

All modules and interface units share a base frame template:

<template id="window">
  <div class="window" data-augmented-ui="tl-clip br-clip inlay">
    <div class="window-header">
      <slot name="title"></slot>
    </div>
    <div class="window-body">
      <slot></slot>
    </div>
  </div>
</template>

Styles are scoped where possible and reset between frames.

📁 Styling Resources

Located in:

style-guide/
├── empire-colors.md
├── base-frame.html
├── layout-sketches.png

📡 Planned Enhancements

  • SVG accents and background glow overlays
  • Motion transitions on window open/close
  • Subtle animated borders for selected/active panels
  • CSS variable system for full theme swappability

📌 Summary

  • The app uses Augmented UI + Halfmoon + Topcoat
  • Themes are faction-specific and easily toggled
  • Visual consistency is maintained across modules using template frames
⚠️ **GitHub.com Fallback** ⚠️