hive-c0re: partial Catppuccin Mocha reskin for the vendored Swagger UI
Not yet wired up -- these are the SWAGGER_UI_OVERWRITE_FOLDER payload
files (utoipa-swagger-ui's build-time overwrite hook), inert until
something points that env var at hive-c0re/swagger-ui-theme/ during
the crate's cargo build. See message to damocles for the nix-side ask.
hive-c0re/swagger-ui-theme/index.html: byte-identical to the vendored
swagger-ui-5.17.14 dist's own index.html (utoipa-swagger-ui-vendored
0.1.2), plus one added <link> to hyperhive-theme.css.
hive-c0re/swagger-ui-theme/hyperhive-theme.css: partial reskin per
mara's steer on hyperhive#2966 ("apply theme colors only", not a full
redesign) -- page background, topbar, borders, links, headings, form
controls recoloured to the Catppuccin Mocha palette already used
elsewhere (frontend/packages/shared/src/colors.css); Swagger's own
semantic HTTP-method badge colours and execute/cancel action-button
colours left untouched, they carry real meaning independent of
hyperhive branding.
This commit is contained in:
iris
mara
parent
6d22b57a6d
commit
de15410394
2 changed files with 215 additions and 0 deletions
188
hive-c0re/swagger-ui-theme/hyperhive-theme.css
Normal file
188
hive-c0re/swagger-ui-theme/hyperhive-theme.css
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
/* 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.
|
||||
|
||||
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) */
|
||||
}
|
||||
|
||||
/* Page chrome */
|
||||
html,
|
||||
body {
|
||||
background: var(--hh-base00);
|
||||
}
|
||||
.swagger-ui {
|
||||
color: var(--hh-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);
|
||||
}
|
||||
.swagger-ui .topbar .download-url-wrapper input[type="text"] {
|
||||
border-color: var(--hh-base02);
|
||||
background: var(--hh-base00);
|
||||
color: var(--hh-base05);
|
||||
}
|
||||
.swagger-ui .topbar .download-url-wrapper .download-url-button {
|
||||
background: var(--hh-base0e);
|
||||
color: var(--hh-base01);
|
||||
}
|
||||
|
||||
/* Info block (spec title/description) + links throughout. */
|
||||
.swagger-ui .info .title,
|
||||
.swagger-ui .info li,
|
||||
.swagger-ui .info p,
|
||||
.swagger-ui .info table {
|
||||
color: var(--hh-base05);
|
||||
}
|
||||
.swagger-ui a.nostyle,
|
||||
.swagger-ui a.nostyle:visited,
|
||||
.swagger-ui .info a {
|
||||
color: var(--hh-base0d);
|
||||
}
|
||||
.swagger-ui .opblock-tag {
|
||||
color: var(--hh-base05);
|
||||
border-bottom-color: var(--hh-base02);
|
||||
}
|
||||
.swagger-ui .opblock-tag:hover {
|
||||
background: color-mix(in srgb, var(--hh-base0e) 8%, transparent);
|
||||
}
|
||||
|
||||
/* Scheme/server selector bar. */
|
||||
.swagger-ui .scheme-container {
|
||||
background: var(--hh-base01);
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid var(--hh-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);
|
||||
}
|
||||
.swagger-ui .opblock .opblock-summary-description,
|
||||
.swagger-ui .opblock .opblock-summary-path,
|
||||
.swagger-ui .opblock .opblock-summary-path__deprecated {
|
||||
color: var(--hh-base05);
|
||||
}
|
||||
.swagger-ui .opblock .opblock-section-header {
|
||||
background: var(--hh-base00);
|
||||
}
|
||||
.swagger-ui .opblock-description-wrapper p,
|
||||
.swagger-ui .opblock-external-docs-wrapper p,
|
||||
.swagger-ui .opblock-title_normal p,
|
||||
.swagger-ui .parameter__name,
|
||||
.swagger-ui .parameter__type,
|
||||
.swagger-ui .parameter__deprecated,
|
||||
.swagger-ui .parameter__in,
|
||||
.swagger-ui table.model tr.property-row td {
|
||||
color: var(--hh-base05);
|
||||
}
|
||||
.swagger-ui .tab li,
|
||||
.swagger-ui .opblock .opblock-section-header h4,
|
||||
.swagger-ui .opblock .opblock-section-header label {
|
||||
color: var(--hh-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);
|
||||
}
|
||||
.swagger-ui .responses-inner h4,
|
||||
.swagger-ui .responses-inner h5 {
|
||||
color: var(--hh-base05);
|
||||
}
|
||||
.swagger-ui .response-col_status {
|
||||
color: var(--hh-base05);
|
||||
}
|
||||
.swagger-ui .model-box,
|
||||
.swagger-ui section.models {
|
||||
background: var(--hh-base01);
|
||||
}
|
||||
.swagger-ui section.models {
|
||||
border-color: var(--hh-base02);
|
||||
}
|
||||
.swagger-ui section.models h4 {
|
||||
color: var(--hh-base05);
|
||||
}
|
||||
.swagger-ui .model {
|
||||
color: var(--hh-base05);
|
||||
}
|
||||
|
||||
/* Form controls — inputs/selects/textareas default to Swagger's stock
|
||||
white regardless of surrounding recolour; without this they'd be the
|
||||
one visibly wrong element on the page. */
|
||||
.swagger-ui select,
|
||||
.swagger-ui input[type="text"],
|
||||
.swagger-ui input[type="password"],
|
||||
.swagger-ui input[type="search"],
|
||||
.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);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
.swagger-ui .btn.authorize {
|
||||
color: var(--hh-base0e);
|
||||
border-color: var(--hh-base0e);
|
||||
}
|
||||
.swagger-ui .btn.authorize svg {
|
||||
fill: var(--hh-base0e);
|
||||
}
|
||||
|
||||
/* `!important` needed here: Swagger's own `.swagger-ui .highlight-code`
|
||||
syntax-highlighting rules ship at equal-or-higher specificity and are
|
||||
emitted after the cascade point our stylesheet link occupies is
|
||||
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 {
|
||||
background: var(--hh-base00) !important;
|
||||
}
|
||||
.swagger-ui .microlight {
|
||||
color: var(--hh-base05);
|
||||
}
|
||||
27
hive-c0re/swagger-ui-theme/index.html
Normal file
27
hive-c0re/swagger-ui-theme/index.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!-- HTML for static distribution bundle build -->
|
||||
<!-- 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. -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="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" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="swagger-ui"></div>
|
||||
<script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
|
||||
<script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
|
||||
<script src="./swagger-initializer.js" charset="UTF-8"> </script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue