From 3fde4a8c74291261510e5e5b026669abb8ee5b0f Mon Sep 17 00:00:00 2001 From: anti Date: Wed, 22 Apr 2026 19:57:11 -0400 Subject: [PATCH] docs(wiki): add UI-Things page with button/chip/layout proportions --- UI-Things.md | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++ _Sidebar.md | 1 + 2 files changed, 107 insertions(+) create mode 100644 UI-Things.md diff --git a/UI-Things.md b/UI-Things.md new file mode 100644 index 0000000..4b0168a --- /dev/null +++ b/UI-Things.md @@ -0,0 +1,106 @@ +# UI Things + +Design measurements and proportions used across the DECNET web dashboard. Follow these when building new components so the UI stays visually consistent. + +## Accent colors + +The app has two accents, toggleable via `html[data-accent]`: + +| Token | Value | Purpose | +|--------------------|-------------------------------|--------------------------------------| +| `--matrix` | `#00ff41` | Default "safe" / neutral action | +| `--violet` | `#ee82ee` | Primary / destructive-intent action | +| `--alert` | red (`#ff4d4d`-ish) | Danger / destructive confirm | +| `--warn` | amber (`#e0a040`) | Caution / armed-confirm intermediate | +| `--accent` | → `--matrix` or `--violet` | User-selected accent | +| `--accent-tint-10` | accent @ 10% alpha | Soft backgrounds (chips, hovers) | +| `--accent-tint-30` | accent @ 30% alpha | Borders on tinted surfaces | +| `--accent-glow` | `0 0 10px ` | Hover/focus glow | + +**Rule:** inline helpers that should follow the user-selected accent (chips, soft highlights) use `var(--accent)` + `var(--accent-tint-*)`. Use hard-coded `--matrix` / `--violet` only when the role is fixed (green = default action, violet = primary CTA). + +## Buttons + +### Primary action button (canonical) + +This is the shape used for `DEPLOY DECKIES`, `NEW TOPOLOGY`, and every page-header CTA: + +```css +cursor: pointer; +background: transparent; +border: 1px solid var(--matrix); /* or --violet for primary */ +color: var(--matrix); /* or --violet */ +padding: 7px 14px; +font-family: inherit; +font-size: 0.78rem; +letter-spacing: 1.5px; +display: inline-flex; +align-items: center; +gap: 8px; +transition: all 0.3s ease; +``` + +On hover: fill with the border color, text → `#000`, box-shadow → matching glow. + +### Variants + +All share the same padding / font / letter-spacing — only the color changes. + +| Class | Border / text | Hover fill | When to use | +|-----------------|-----------------------------------|----------------------------------|-----------------------------------| +| (base) | `--matrix` | `--matrix` | Default neutral action | +| `.violet` | `--violet` | `--violet` | Primary / emphasized CTA | +| `.alert` | `--alert` | `--alert` | Destructive action | +| `.warn` | `--warn` | `--warn` | Armed-confirm intermediate state | +| `.ghost` | `--border` (dim) | `--matrix` | Secondary / refresh-style | +| `.small` | `4px 10px` padding, `0.68rem` | — | Inline / dense rows | +| `:disabled` | `opacity: 0.3; cursor: not-allowed` | — | Universal disabled state | + +### Segmented / filter buttons + +Filter bars (`.fleet-filter-btn`, `.seg-group button`) and icon-only chrome (`.toggle-btn`, `.close-btn`, `.pager button`, `.logout-btn`) are **not** page-action buttons and intentionally use their own smaller, borderless styling. Don't align them with the canonical button — they serve a different role. + +## Chips + +Small pill-shaped badges, e.g. the `TCP/22` port chip in the MazeNET service palette. + +```css +font-size: 0.68rem; +padding: 2px 6px; +border: 1px solid var(--accent-tint-30); +background: var(--accent-tint-10); +color: var(--accent); +letter-spacing: 0.5px; +font-family: var(--font-mono); +``` + +**Why the accent token instead of gray:** gray chips on a dark panel lose contrast and become unreadable at `font-size: 0.68rem`. Tinting with the user-selected accent keeps them readable while still looking subordinate to the surrounding text. + +## Layout + +### Topbar / sidebar + +- Topbar height: `64px` (`--topbar-h`). +- Content viewport padding: `32px` (top/bottom and left/right). +- Pages that should fill the viewport use `min-height: calc(100vh - 128px)` (64 topbar + 32 + 32 padding). + +### MazeNET fullscreen + +Add `body.maze-fullscreen` to hide `.sidebar` and `.topbar`, and reduce content padding to `16px 32px`. Toggled together with the browser Fullscreen API from the MazeNET header button. + +### Side panels (SERVICE FLEET, INSPECTOR) + +- Collapsed/expanded via animated `grid-template-columns` on `.maze-shell`. +- Expanded widths: `240px` (palette) / `320px` (inspector). Collapsed: `0px`. +- Panel fade/slide: `opacity 200ms ease, transform 260ms cubic-bezier(0.4, 0, 0.2, 1)`. +- Shell transition: `grid-template-columns 260ms cubic-bezier(0.4, 0, 0.2, 1)`. + +## Typography + +Monospace everywhere (`var(--font-mono)`). Page action text is uppercase, mildly spaced (`letter-spacing: 1.5px`). Subgroup / section labels use `letter-spacing: 1.5px` at `0.55rem` with `opacity: 0.4` in the accent color. + +## Transitions + +- Standard: `all 0.3s ease` (buttons, hovers). +- Panel glide: `260ms cubic-bezier(0.4, 0, 0.2, 1)` (material-standard easing). +- Panel fade: `200ms ease` on opacity. diff --git a/_Sidebar.md b/_Sidebar.md index 33ff347..0ea55fd 100644 --- a/_Sidebar.md +++ b/_Sidebar.md @@ -38,6 +38,7 @@ - [Developer-Guide](Developer-Guide) - [Design-Overview](Design-Overview) - [Writing-a-Service-Plugin](Writing-a-Service-Plugin) +- [UI-Things](UI-Things) - [Module-Reference-Core](Module-Reference-Core) - [Module-Reference-Web](Module-Reference-Web) - [Module-Reference-Services](Module-Reference-Services)