hyperhive/hive-c0re/swagger-ui-theme/hyperhive-theme.css

/* 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);
}