vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

hive-c0re: swagger theme follows stylix via colors.css, not a hardcoded copy

Browse source 
Loads the dashboard's own themed /static/colors.css directly (same
origin, see vhosts.nix dashboardProxyLocation) instead of redeclaring
the Catppuccin Mocha hex values locally. The theme now re-themes live
with the rest of the dashboard instead of drifting out of sync.

Addresses review feedback on PR.
This commit is contained in:
iris 2026-08-02 19:55:10 +02:00 • committed by mara
commit 062a84378d
2 changed files with 68 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

124
hive-c0re/swagger-ui-theme/hyperhive-theme.css
View file

@ -1,60 +1,50 @@
/* Partial hyperhive (Catppuccin Mocha) reskin for the vendored Swagger UI
at /api/docs — the operator asked for this as a follow-up to the
OpenAPI/Swagger-UI docs work. Scope is deliberately bounded per her
steer ("its not about making it completely vibec0re, apply theme
colors only"): recolor the page chrome (background, topbar,
borders, links, 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.
/* 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
docs work. Scope is deliberately bounded per her steer ("its not
about making it completely vibec0re, apply theme colors only"):
recolor the page chrome (background, topbar, borders, links,
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
cascade on shared selectors without `!important`; only reaching for
`!important` where Swagger's own CSS is more specific than a same-
specificity override can beat (documented per-rule below).
Same base16 contract as frontend/packages/shared/src/colors.css
(Catppuccin Mocha) — this file can't @import that one (separate build
pipeline, plain static asset, no preprocessing), so the slots are
redeclared here. Keep the two in sync if the palette ever changes;
see docs/web-ui/css-vars.md for the base16 contract this mirrors. */
:root {
--hh-base00: #1e1e2e; /* default bg */
--hh-base01: #181825; /* lighter bg (elevated surfaces / topbar) */
--hh-base02: #313244; /* selection / surface — borders */
--hh-base03: #45475a; /* comments / dim surface */
--hh-base05: #cdd6f4; /* default foreground */
--hh-base0c: #89dceb; /* cyan — info accents */
--hh-base0d: #89b4fa; /* blue — links, interactive accent */
--hh-base0e: #cba6f7; /* mauve — primary accent (active tabs, highlights) */
}
Follows stylix live, same as every other dashboard page: index.html
links the dashboard's own themed `colors.css` (served from
`/static/`, same origin) directly ahead of this file, so the
`--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. */
/* Page chrome */
html,
body {
background: var(--hh-base00);
background: var(--base00);
}
.swagger-ui {
color: var(--hh-base05);
color: var(--base05);
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code",
"Source Code Pro", monospace;
}
/* Topbar — replaces Swagger's default green bar. */
.swagger-ui .topbar {
background: var(--hh-base01);
border-bottom: 1px solid var(--hh-base02);
background: var(--base01);
border-bottom: 1px solid var(--base02);
}
.swagger-ui .topbar .download-url-wrapper input[type="text"] {
border-color: var(--hh-base02);
background: var(--hh-base00);
color: var(--hh-base05);
border-color: var(--base02);
background: var(--base00);
color: var(--base05);
}
.swagger-ui .topbar .download-url-wrapper .download-url-button {
background: var(--hh-base0e);
color: var(--hh-base01);
background: var(--base0E);
color: var(--base01);
}
/* Info block (spec title/description) + links throughout. */
@ -62,42 +52,42 @@ body {
.swagger-ui .info li,
.swagger-ui .info p,
.swagger-ui .info table {
color: var(--hh-base05);
color: var(--base05);
}
.swagger-ui a.nostyle,
.swagger-ui a.nostyle:visited,
.swagger-ui .info a {
color: var(--hh-base0d);
color: var(--base0D);
}
.swagger-ui .opblock-tag {
color: var(--hh-base05);
border-bottom-color: var(--hh-base02);
color: var(--base05);
border-bottom-color: var(--base02);
}
.swagger-ui .opblock-tag:hover {
background: color-mix(in srgb, var(--hh-base0e) 8%, transparent);
background: color-mix(in srgb, var(--base0E) 8%, transparent);
}
/* Scheme/server selector bar. */
.swagger-ui .scheme-container {
background: var(--hh-base01);
background: var(--base01);
box-shadow: none;
border-bottom: 1px solid var(--hh-base02);
border-bottom: 1px solid var(--base02);
}
/* Endpoint rows — keep the method-colour left border (GET/POST/etc, it's
Swagger's own semantic language) but recolour the card body so it
doesn't sit on stock white. */
.swagger-ui .opblock {
background: var(--hh-base01);
border-color: var(--hh-base02);
background: var(--base01);
border-color: var(--base02);
}
.swagger-ui .opblock .opblock-summary-description,
.swagger-ui .opblock .opblock-summary-path,
.swagger-ui .opblock .opblock-summary-path__deprecated {
color: var(--hh-base05);
color: var(--base05);
}
.swagger-ui .opblock .opblock-section-header {
background: var(--hh-base00);
background: var(--base00);
}
.swagger-ui .opblock-description-wrapper p,
.swagger-ui .opblock-external-docs-wrapper p,
@ -107,39 +97,39 @@ body {
.swagger-ui .parameter__deprecated,
.swagger-ui .parameter__in,
.swagger-ui table.model tr.property-row td {
color: var(--hh-base05);
color: var(--base05);
}
.swagger-ui .tab li,
.swagger-ui .opblock .opblock-section-header h4,
.swagger-ui .opblock .opblock-section-header label {
color: var(--hh-base05);
color: var(--base05);
}
/* Response / model tables. */
.swagger-ui table thead tr td,
.swagger-ui table thead tr th {
color: var(--hh-base05);
border-bottom-color: var(--hh-base02);
color: var(--base05);
border-bottom-color: var(--base02);
}
.swagger-ui .responses-inner h4,
.swagger-ui .responses-inner h5 {
color: var(--hh-base05);
color: var(--base05);
}
.swagger-ui .response-col_status {
color: var(--hh-base05);
color: var(--base05);
}
.swagger-ui .model-box,
.swagger-ui section.models {
background: var(--hh-base01);
background: var(--base01);
}
.swagger-ui section.models {
border-color: var(--hh-base02);
border-color: var(--base02);
}
.swagger-ui section.models h4 {
color: var(--hh-base05);
color: var(--base05);
}
.swagger-ui .model {
color: var(--hh-base05);
color: var(--base05);
}
/* Form controls — inputs/selects/textareas default to Swagger's stock
@ -152,25 +142,25 @@ body {
.swagger-ui input[type="email"],
.swagger-ui input[type="file"],
.swagger-ui textarea {
background: var(--hh-base00);
color: var(--hh-base05);
border-color: var(--hh-base02);
background: var(--base00);
color: var(--base05);
border-color: var(--base02);
}
/* Generic (non-semantic) buttons — "Try it out" / "Reset" / "Clear" /
"Authorize" close etc. Execute (green) and Cancel (red) keep Swagger's
own colours; only the ones that were plain-white-on-white before. */
.swagger-ui .btn {
color: var(--hh-base05);
border-color: var(--hh-base02);
background: var(--hh-base00);
color: var(--base05);
border-color: var(--base02);
background: var(--base00);
}
.swagger-ui .btn.authorize {
color: var(--hh-base0e);
border-color: var(--hh-base0e);
color: var(--base0E);
border-color: var(--base0E);
}
.swagger-ui .btn.authorize svg {
fill: var(--hh-base0e);
fill: var(--base0E);
}
/* `!important` needed here: Swagger's own `.swagger-ui .highlight-code`
@ -181,8 +171,8 @@ body {
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 {
background: var(--hh-base00) !important;
background: var(--base00) !important;
}
.swagger-ui .microlight {
color: var(--hh-base05);
color: var(--base05);
}

15
hive-c0re/swagger-ui-theme/index.html
View file

@ -2,10 +2,16 @@
<!-- Overrides the vendored Swagger UI's own `dist/index.html` (byte-for-
byte identical otherwise — copied from utoipa-swagger-ui-vendored
0.1.2's swagger-ui-5.17.14/dist/index.html) via the crate's
`SWAGGER_UI_OVERWRITE_FOLDER` build-time hook, adding exactly one
line: the hyperhive-theme.css stylesheet link, loaded after
swagger-ui.css so its rules win the cascade without needing
`!important`. See docs/web-ui/dashboard.md::Dashboard endpoints. -->
`SWAGGER_UI_OVERWRITE_FOLDER` build-time hook, adding two lines: the
dashboard's own themed `colors.css` (same absolute `/static/`
origin the dashboard dist serves it from — 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. -->
<!DOCTYPE html>
<html lang="en">
<head>
@ -13,6 +19,7 @@
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="./swagger-ui.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" type="text/css" href="/static/colors.css" />
<link rel="stylesheet" type="text/css" href="hyperhive-theme.css" />
<link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />