From 9071f3d2b82da2046800c456e1f67dc895dae1f5 Mon Sep 17 00:00:00 2001 From: Mike Szczys Date: Sat, 25 Nov 2023 19:23:00 -0600 Subject: [PATCH 1/3] lightmode css: fix swagger Authorize dialog Remove swagger-ui styling that placed white text on a light background in the Authorize dialog Signed-off-by: Mike Szczys --- src/css/custom.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index df171555..dc1cdb4d 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -103,10 +103,6 @@ button [class^="lightToggleIcon"]:not(:hover) { background-color: unset; } -.swagger-ui code { - color: white; -} - html[data-theme="dark"] { --ifm-color-primary: var(--golioth-color-coral); --ifm-color-primary-dark: #d23c43; From e10ad195168a852e99c09e789de272b522137b9a Mon Sep 17 00:00:00 2001 From: Mike Szczys Date: Sat, 25 Nov 2023 20:36:08 -0600 Subject: [PATCH 2/3] css: fix swagger styling * Change order of css include so swagger styles can be overridden * Add css file for fixing swagger-ui styles (especially in dark mode) Signed-off-by: Mike Szczys --- docusaurus.config.js | 3 +- src/css/custom-swagger-ui.css | 105 ++++++++++++++++++++++++++++++++++ src/css/custom.css | 6 +- 3 files changed, 108 insertions(+), 6 deletions(-) create mode 100644 src/css/custom-swagger-ui.css diff --git a/docusaurus.config.js b/docusaurus.config.js index ac6d5138..862b7112 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -178,8 +178,9 @@ module.exports = { // }, theme: { customCss: [ - require.resolve("./src/css/custom.css"), require.resolve("swagger-ui-react/swagger-ui.css"), + require.resolve("./src/css/custom.css"), + require.resolve("./src/css/custom-swagger-ui.css"), ], }, }, diff --git a/src/css/custom-swagger-ui.css b/src/css/custom-swagger-ui.css new file mode 100644 index 00000000..96812d54 --- /dev/null +++ b/src/css/custom-swagger-ui.css @@ -0,0 +1,105 @@ +.swagger-ui pre { + background-color: unset; +} + +.swagger-ui .info a, +html[data-theme="dark"] .swagger-ui .info a { + color: var(--ifm-color-primary); +} + +html[data-theme="dark"] .swagger-ui .info .title, +html[data-theme="dark"] .swagger-ui .info .base-url, +html[data-theme="dark"] .swagger-ui a.nostyle, +html[data-theme="dark"] .swagger-ui [class^="parameter__"], +html[data-theme="dark"] .swagger-ui .prop-format, +html[data-theme="dark"] .swagger-ui table, +html[data-theme="dark"] .swagger-ui .tab, +html[data-theme="dark"] .swagger-ui .tab li, +html[data-theme="dark"] .swagger-ui table thead tr td, +html[data-theme="dark"] .swagger-ui table thead tr th, +html[data-theme="dark"] .swagger-ui .response-col_status, +html[data-theme="dark"] .swagger-ui [class^="responses-"] h4, +html[data-theme="dark"] .swagger-ui [class^="responses-"] h5, +html[data-theme="dark"] .swagger-ui .opblock .opblock-section-header h4, +html[data-theme="dark"] .swagger-ui .opblock .opblock-section-header > label, +html[data-theme="dark"] .swagger-ui label, +html[data-theme="dark"] .swagger-ui .scheme-container .schemes > label , +html[data-theme="dark"] .swagger-ui .scheme-container .schemes > .schemes-server-container > label, +html[data-theme="dark"] .swagger-ui section.models h4, +html[data-theme="dark"] .swagger-ui [class^="model"], +html[data-theme="dark"] .swagger-ui .model .property.primitive, +html[data-theme="dark"] .swagger-ui .model-toggle.collapsed, +html[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux-header h3, +html[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux-content h4, +html[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux-content p, +html[data-theme="dark"] .swagger-ui .errors-wrapper { + color: var(--golioth-color-white); +} + +html[data-theme="dark"] .swagger-ui .scheme-container { + box-shadow: 0 1px 2px 0 rgba(255, 255, 255, .3); +} + +html[data-theme="dark"] .swagger-ui .opblock-tag, +html[data-theme="dark"] .swagger-ui section.models.is-open h4 { + border-bottom: 1px solid rgba(255, 255, 255, .3); +} + +html[data-theme="dark"] .swagger-ui section.models { + border: 1px solid rgba(255, 255, 255, .3); +} + +html[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux { + background-color: var(--golioth-color-cod-gray); +} + +html[data-theme="dark"] .swagger-ui .btn { + color: var(--golioth-color-white); +} + +html[data-theme="dark"] .swagger-ui .parameter__name.required span, +html[data-theme="dark"] .swagger-ui .parameter__name.required::after, +html[data-theme="dark"] .swagger-ui .prop-type { + color: var(--golioth-color-lightning-yellow); +} + +html[data-theme="dark"] .swagger-ui section.models .model-container { + background: rgba(80,227,194,.1); + border: 1px solid #50e3c2; +} + +html[data-theme="dark"] .swagger-ui .opblock-tag svg , +html[data-theme="dark"] .swagger-ui .opblock .opblock-summary svg, +html[data-theme="dark"] .swagger-ui section.models h4 svg, +html[data-theme="dark"] .swagger-ui .model-toggle, +html[data-theme="dark"] .swagger-ui .model-toggle.collapsed { + filter: invert(100%); +} + +/* Don't invert the clipboard icon in dark */ +html[data-theme="dark"] .swagger-ui .opblock .opblock-summary .view-line-link.copy-to-clipboard svg { + filter: unset; +} + +html[data-theme="dark"] .swagger-ui .scheme-container, +html[data-theme="dark"] .swagger-ui .opblock .opblock-section-header { + background-color: unset; +} + +html[data-theme="dark"] .swagger-ui input[type], +html[data-theme="dark"] .swagger-ui textarea .swagger-ui .opblock .opblock-section-header { + color: var(--golioth-color-white); + background-color: var(--golioth-color-cod-gray); +} + +html[data-theme="dark"] .swagger-ui .opblock-body pre.microlight { + background-color: var(--golioth-color-cod-gray) !important; +} + +html[data-theme="dark"] .swagger-ui .loading-container .loading { + filter: invert(100%); +} + +html[data-theme="dark"] .swagger-ui .markdown code, .swagger-ui .renderedMarkdown code { + color: var(--golioth-color-lightning-yellow); +} diff --git a/src/css/custom.css b/src/css/custom.css index dc1cdb4d..79f03362 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -14,7 +14,7 @@ --golioth-color-cod-gray: #1a1a1a; --golioth-color-charcoal: #353535; --golioth-color-concrete: #f2f2f2; - --golioth-color-blac: #000000; + --golioth-color-black: #000000; --golioth-color-white: #ffffff; --ifm-color-primary: var(--golioth-color-coral); @@ -99,10 +99,6 @@ button [class^="lightToggleIcon"]:not(:hover) { padding: 0 var(--ifm-pre-padding); } -.swagger-ui pre { - background-color: unset; -} - html[data-theme="dark"] { --ifm-color-primary: var(--golioth-color-coral); --ifm-color-primary-dark: #d23c43; From 747e611579e0d02226b46933c485a309588e705f Mon Sep 17 00:00:00 2001 From: Mike Szczys Date: Tue, 28 Nov 2023 09:48:39 -0600 Subject: [PATCH 3/3] css: change code block background for branding Change the codeblock background from the blue tint to use a grey from our new branding colors. Signed-off-by: Mike Szczys --- src/css/custom.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 79f03362..c7292c95 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -92,6 +92,10 @@ button [class^="lightToggleIcon"]:not(:hover) { --ifm-hero-text-color: white; } +pre code { + background-color: var(--golioth-color-cod-gray); +} + .docusaurus-highlight-code-line { background-color: rgb(72, 77, 91); display: block;