apunkt/nyx
1
0
Fork 0
mirror of https://github.com/elicpeter/nyx.git synced 2026-06-06 19:35:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: Update brand color to mint-cyan across screenshots and UI elements

Browse source
This commit is contained in:
elipeter 2026-05-05 19:02:47 -04:00
parent bbf6f91c56
commit c6baa4d5dc
46 changed files with 57 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

7
scripts/README.md
View file

@ -8,7 +8,7 @@ Local helpers for repo-wide checks and a couple of one-off tools.
| `check.sh` | Verify only (no fixes). Mirrors the GitHub Actions CI workflow. |
| `cached-cargo-test.sh` | Wrap `cargo test` with a source-hash cache; concurrent invocations of the same args share one run. |
| `capture-screenshots.mjs`| Capture the README stills and demo GIF from a running `nyx serve`. Needs Playwright and ffmpeg. |
| `frame-screenshots.py` | Wrap a PNG in the brand purple gradient. Called by `capture-screenshots.mjs` as its final phase, but can be run standalone. |
| `frame-screenshots.py` | Wrap a PNG in the brand mint-cyan gradient. Called by `capture-screenshots.mjs` as its final phase, but can be run standalone. |
Fixers stream their output (so you can see what changed); tests run quietly and
only show output if they fail. Both scripts print a green/red summary at the end
@ -73,8 +73,9 @@ Stills are captured in two phases:
`serve-scan-detail.png`, `serve-rules.png`, `serve-config.png`.
Then `frame-screenshots.py` runs over every captured PNG and wraps it in
the brand purple gradient (1800x1113 outer, 1600x992 inner, 12px rounded
corners, top-left `#8a5bf5` to bottom-right `#4d1d97`). Finally,
the brand mint-led four-corner gradient (1800x1113 outer, 1600x992 inner,
12px rounded corners: TL `#72f3d7`, TR `#ff6aa2`, BL `#f8c56b`, BR
`#4cc9ff`). Finally,
`docs/serve-overview.png` is copied to the top-level `overview.png`
because that is the path the README references.

4
scripts/capture-screenshots.mjs
View file

@ -21,7 +21,7 @@
* two-scan history (overview trend, scans list,
* scan detail) plus the static-ish ones
* (triage, explorer, rules, config)
* 7. frame — composite the brand purple gradient around every
* 7. frame — composite the brand mint-cyan gradient around every
* captured PNG via scripts/frame-screenshots.py
*
* Prerequisites (script asserts each before starting):
@ -575,7 +575,7 @@ function applyFrames(captured, { natural = false } = {}) {
if (paths.length === 0) return;
saveRawCopies(paths);
const label = natural ? 'natural-size' : 'fixed';
console.error(`[frame] applying purple gradient frame (${label}) to ${paths.length} files`);
console.error(`[frame] applying mint-led four-corner frame (${label}) to ${paths.length} files`);
const args = natural ? ['--natural', ...paths] : paths;
execFileSync('python3', [FRAMER, ...args], { stdio: 'inherit' });
// Mirror the framed serve-overview.png to the top-level path the

21
scripts/frame-screenshots.py
View file

@ -1,10 +1,11 @@
#!/usr/bin/env python3
"""Frame Nyx screenshots with the brand purple gradient.
"""Frame Nyx screenshots with the brand mint-led four-corner gradient.
Reads a list of PNG paths from argv (or all PNGs under
assets/screenshots/ if no args) and overwrites each with a framed
version: inner screenshot with rounded corners, centered on a
diagonal purple gradient (top-left #8a5bf5 → bottom-right #4d1d97).
four-corner mint-led gradient (TL #72f3d7, TR #ff6aa2,
BL #f8c56b, BR #4cc9ff).
Two framing modes:
- default inner is resampled to 1600x992, outer is 1800x1113.
@ -37,14 +38,12 @@ PAD_R = OUTER_W - INNER_W - PAD_L # 100
PAD_B = OUTER_H - INNER_H - PAD_T # 61
CORNER_RADIUS = 12
# Four-corner bilinear gradient. Sampled from the existing CLI
# screenshots so every framed asset matches: top-left is the lightest
# (Tailwind violet-500), the off-diagonal corners are violet-600, and
# bottom-right is violet-900.
GRAD_TL = (139, 92, 246) # #8b5cf6 violet-500
GRAD_TR = (124, 58, 237) # #7c3aed violet-600
GRAD_BL = (124, 58, 237) # #7c3aed violet-600
GRAD_BR = ( 76, 29, 149) # #4c1d95 violet-900
# Four-corner bilinear gradient. The primary brand accent anchors the
# frame, with distinct warm/cool corners for richer screenshot depth.
GRAD_TL = (114, 243, 215) # #72f3d7
GRAD_TR = (255, 106, 162) # #ff6aa2
GRAD_BL = (248, 197, 107) # #f8c56b
GRAD_BR = ( 76, 201, 255) # #4cc9ff
def make_gradient(w: int, h: int) -> Image.Image:
@ -135,7 +134,7 @@ def frame_one(src: Path, natural: bool = False) -> None:
def frame_gif(src: Path) -> None:
"""Frame an animated GIF in place: every frame gets the same
purple gradient frame, then the result is re-encoded as a single-
mint-cyan gradient frame, then the result is re-encoded as a single-
palette GIF. Calls ffmpeg for the final encode (Pillow's GIF
output is noticeably worse for large animations).
"""