hive-c0re: trim swagger-theme comments down to essentials

Cut the process-narrative framing (operator quote, backstory) and
shortened per-section labels — the CSS was carrying more explanation
than declaration. Keep only what a future reader actually needs: the
override mechanism, the stylix-follows-live fact, and the two
non-obvious calls (method-colour exception, the one !important).
This commit is contained in:
iris 2026-08-02 19:56:57 +02:00 committed by mara
commit 5471b49f2a
2 changed files with 25 additions and 48 deletions

View file

@ -1,24 +1,15 @@
/* Partial hyperhive reskin for the vendored Swagger UI at /api/docs /* Partial hyperhive reskin for the vendored Swagger UI at /api/docs.
the operator asked for this as a follow-up to the OpenAPI/Swagger-UI Recolors chrome (background, topbar, borders, links, inputs) to
docs work. Scope is deliberately bounded per her steer ("its not match the dashboard. Swagger's own semantic HTTP-method badge colours
about making it completely vibec0re, apply theme colors only"): and execute/cancel button colours are left alone those carry
recolor the page chrome (background, topbar, borders, links, meaning independent of hyperhive branding.
headings, inputs) to match the rest of the dashboard; leave Swagger's
own semantic HTTP-method colours (GET/POST/PUT/DELETE badges) and the
execute/cancel action-button colours alone those carry real meaning
to anyone who already knows Swagger UI, not just hyperhive branding.
Loaded after swagger-ui.css (see index.html) so these rules win the Loaded after swagger-ui.css (see index.html) so these rules win the
cascade on shared selectors without `!important`; only reaching for cascade without `!important`, except where noted below.
`!important` where Swagger's own CSS is more specific than a same-
specificity override can beat (documented per-rule below).
Follows stylix live, same as every other dashboard page: index.html `--baseNN` values come from `/static/colors.css` (linked in
links the dashboard's own themed `colors.css` (served from index.html, same origin as the dashboard) this follows the
`/static/`, same origin) directly ahead of this file, so the operator's live stylix theme, not a hardcoded copy. See
`--baseNN` custom properties below resolve to whatever the operator's
current stylix scheme actually is no hardcoded hex, nothing to
drift out of sync when the theme changes. See
frontend/packages/shared/src/colors.css for the base16 contract. */ frontend/packages/shared/src/colors.css for the base16 contract. */
/* Page chrome */ /* Page chrome */
@ -32,7 +23,7 @@ body {
"Source Code Pro", monospace; "Source Code Pro", monospace;
} }
/* Topbar — replaces Swagger's default green bar. */ /* Topbar */
.swagger-ui .topbar { .swagger-ui .topbar {
background: var(--base01); background: var(--base01);
border-bottom: 1px solid var(--base02); border-bottom: 1px solid var(--base02);
@ -47,7 +38,7 @@ body {
color: var(--base01); color: var(--base01);
} }
/* Info block (spec title/description) + links throughout. */ /* Info block + links */
.swagger-ui .info .title, .swagger-ui .info .title,
.swagger-ui .info li, .swagger-ui .info li,
.swagger-ui .info p, .swagger-ui .info p,
@ -74,9 +65,8 @@ body {
border-bottom: 1px solid var(--base02); border-bottom: 1px solid var(--base02);
} }
/* Endpoint rows keep the method-colour left border (GET/POST/etc, it's /* Endpoint rows method-colour left border stays; only the card body
Swagger's own semantic language) but recolour the card body so it is recoloured. */
doesn't sit on stock white. */
.swagger-ui .opblock { .swagger-ui .opblock {
background: var(--base01); background: var(--base01);
border-color: var(--base02); border-color: var(--base02);
@ -132,9 +122,7 @@ body {
color: var(--base05); color: var(--base05);
} }
/* Form controls inputs/selects/textareas default to Swagger's stock /* Form controls */
white regardless of surrounding recolour; without this they'd be the
one visibly wrong element on the page. */
.swagger-ui select, .swagger-ui select,
.swagger-ui input[type="text"], .swagger-ui input[type="text"],
.swagger-ui input[type="password"], .swagger-ui input[type="password"],
@ -147,9 +135,8 @@ body {
border-color: var(--base02); border-color: var(--base02);
} }
/* Generic (non-semantic) buttons "Try it out" / "Reset" / "Clear" / /* Generic buttons (Try it out / Reset / Authorize etc) execute/cancel
"Authorize" close etc. Execute (green) and Cancel (red) keep Swagger's keep Swagger's own colours. */
own colours; only the ones that were plain-white-on-white before. */
.swagger-ui .btn { .swagger-ui .btn {
color: var(--base05); color: var(--base05);
border-color: var(--base02); border-color: var(--base02);
@ -163,13 +150,9 @@ body {
fill: var(--base0E); fill: var(--base0E);
} }
/* `!important` needed here: Swagger's own `.swagger-ui .highlight-code` /* `!important`: highlight.js re-asserts this per-token inline, so a
syntax-highlighting rules ship at equal-or-higher specificity and are plain override loses. Scoped to the code-sample block background
emitted after the cascade point our stylesheet link occupies is only token colours stay as highlight.js's theme provides. */
evaluated (they're re-asserted per-token by highlight.js's inline
theme), so a plain override loses. Scoped narrowly to the response/
request code-sample background only token colours stay as
highlight.js's own theme provides, this is just the block bg. */
.swagger-ui .highlight-code { .swagger-ui .highlight-code {
background: var(--base00) !important; background: var(--base00) !important;
} }

View file

@ -1,16 +1,10 @@
<!-- HTML for static distribution bundle build --> <!-- HTML for static distribution bundle build -->
<!-- Overrides the vendored Swagger UI's own `dist/index.html` (byte-for- <!-- Overrides the vendored Swagger UI's dist/index.html (byte-identical
byte identical otherwise — copied from utoipa-swagger-ui-vendored otherwise) via `SWAGGER_UI_OVERWRITE_FOLDER`. Adds `colors.css`
0.1.2's swagger-ui-5.17.14/dist/index.html) via the crate's (same origin as the dashboard — see dashboardProxyLocation in
`SWAGGER_UI_OVERWRITE_FOLDER` build-time hook, adding two lines: the nix/host-modules/hive-gateway/vhosts.nix — so this resolves the
dashboard's own themed `colors.css` (same absolute `/static/` operator's live stylix theme, not a frozen copy) and
origin the dashboard dist serves it from — see hyperhive-theme.css, which consumes its `--baseNN` vars. See
nix/host-modules/hive-gateway/vhosts.nix's dashboardProxyLocation,
`/` and `/api/` share one vhost so this resolves whatever the
operator's stylix theme currently renders, not a frozen copy) and
hyperhive-theme.css, which consumes those `--baseNN` vars. Loaded
after swagger-ui.css so hyperhive-theme.css's rules win the cascade
without needing `!important`. See
docs/web-ui/dashboard.md::Dashboard endpoints. --> docs/web-ui/dashboard.md::Dashboard endpoints. -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">