diff --git a/hive-c0re/swagger-ui-theme/hyperhive-theme.css b/hive-c0re/swagger-ui-theme/hyperhive-theme.css index 1ef522b6..671ffc3c 100644 --- a/hive-c0re/swagger-ui-theme/hyperhive-theme.css +++ b/hive-c0re/swagger-ui-theme/hyperhive-theme.css @@ -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); } diff --git a/hive-c0re/swagger-ui-theme/index.html b/hive-c0re/swagger-ui-theme/index.html index 519e967a..e80a7b18 100644 --- a/hive-c0re/swagger-ui-theme/index.html +++ b/hive-c0re/swagger-ui-theme/index.html @@ -2,10 +2,16 @@ + `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. --> @@ -13,6 +19,7 @@ Swagger UI +