docs(wiki): add UI-Things page with button/chip/layout proportions

2026-04-22 19:57:11 -04:00
parent 158c43ec10
commit 3fde4a8c74
2 changed files with 107 additions and 0 deletions
--- a/UI-Things.md
+++ 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 <accent @ 0.5>`     | 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.
--- 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)