From 9432a05cf3c56733433bd6fc9eb2bc7a2a7806ed Mon Sep 17 00:00:00 2001
From: Crevil <bjoern.soerensen@gmail.com>
Date: Fri, 8 Jul 2022 21:49:15 +0200
Subject: [PATCH] Fix OpenAPI HTML descriptions in darkmode

Currently when an OpenAPI specification contains HTML in the description fields
it is not rendered with the correct theme font colors making the description
unreadable in darkmode.

This change adds an additional selector to the style theme that correctly
selects the description block and ensures colors follows the theme.

Signed-off-by: Crevil <bjoern.soerensen@gmail.com>
---
 .changeset/stale-needles-applaud.md                      | 5 +++++
 .../OpenApiDefinitionWidget/OpenApiDefinition.tsx        | 9 +++++----
 2 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/stale-needles-applaud.md

diff --git a/.changeset/stale-needles-applaud.md b/.changeset/stale-needles-applaud.md
new file mode 100644
index 0000000000..cc46dc2e3f
--- /dev/null
+++ b/.changeset/stale-needles-applaud.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': patch
+---
+
+Set font colors correctly for descriptions containing HTML
diff --git a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx
index ae1530f8b0..cff21dcf78 100644
--- a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx
+++ b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx
@@ -53,6 +53,7 @@ const useStyles = makeStyles(theme => ({
           .opblock-summary-operation-id,
           .opblock-summary-path,
           .opblock-summary-path__deprecated,
+          .opblock-description-wrapper,
           .opblock-external-docs-wrapper,
           .opblock-section-header .btn,
           .opblock-section-header>label,
@@ -66,7 +67,7 @@ const useStyles = makeStyles(theme => ({
         fontFamily: theme.typography.fontFamily,
         color: theme.palette.text.primary,
       },
-      [`& .opblock .opblock-section-header, 
+      [`& .opblock .opblock-section-header,
           .model-box,
           section.models .model-container`]: {
         background: theme.palette.background.default,
@@ -75,7 +76,7 @@ const useStyles = makeStyles(theme => ({
           .parameter__in`]: {
         color: theme.palette.text.disabled,
       },
-      [`& table.model, 
+      [`& table.model,
           .parameter__type,
           .model.model-title,
           .model-title,
@@ -91,7 +92,7 @@ const useStyles = makeStyles(theme => ({
       [`& .parameter__name.required:after`]: {
         color: theme.palette.warning.dark,
       },
-      [`& table.model, 
+      [`& table.model,
           table.model .model,
           .opblock-external-docs-wrapper`]: {
         fontSize: theme.typography.fontSize,
@@ -104,7 +105,7 @@ const useStyles = makeStyles(theme => ({
         color: theme.palette.text.hint,
         backgroundColor: theme.palette.background.paper,
       },
-      [`& .opblock-summary-method, 
+      [`& .opblock-summary-method,
           .info a`]: {
         fontFamily: theme.typography.fontFamily,
       },