From cb5393aefe6972e514da1584e7db4a389d539d5d Mon Sep 17 00:00:00 2001
From: Johan Haals <johan.haals@gmail.com>
Date: Tue, 13 Dec 2022 14:20:46 +0100
Subject: [PATCH] Fix markdown styling

Signed-off-by: Johan Haals <johan.haals@gmail.com>
---
 docs/api/utility-apis.md               | 14 +++++++-------
 docs/overview/logos.md                 |  4 ++--
 microsite-next/src/css/customTheme.css | 26 ++++++++++++++++++++++++++
 microsite/static/css/custom.css        | 26 ++++++++++++++++++++++++++
 4 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/docs/api/utility-apis.md b/docs/api/utility-apis.md
index 017c5b699d..a69c874307 100644
--- a/docs/api/utility-apis.md
+++ b/docs/api/utility-apis.md
@@ -283,14 +283,14 @@ long as they adhere to the contract established by an
 implementation they want.
 
 The figure below shows the relationship between
-<span style="color: #82b366">different Apps</span>, that provide
-<span style="color: #6c8ebf">different implementations</span> of the
-<span style="color: #9673a6">FooApi</span>.
-<span style="color: #d6b656">Components</span> within Plugins then access the
-<span style="color: #9673a6">FooApi</span> via the
-<span style="color: #b85450">fooApiRef</span>.
+<span class="textGreen" className="textGreen">different Apps</span>, that provide
+<span class="textBlue" className="textBlue"> different implementations</span> of the
+<span class="textPurple" className="textPurple"> FooApi</span>.
+<span class="textYellow" className="textYellow"> Components</span> within Plugins then access the
+<span class="textPurple" className="textPurple"> FooApi</span> via the
+<span class="textRed" className="textRed"> fooApiRef</span>.
 
-<div style="text-align:center">
+<div className="textAlignCenter" class="textAlignCenter">
 <img src="../assets/utility-apis-fig1.svg" alt="Figure showing the relationship between utility APIs, the apps that provide them, and the plugins that consume them" />
 </div>
 
diff --git a/docs/overview/logos.md b/docs/overview/logos.md
index 9421b7f31e..0739c3731e 100644
--- a/docs/overview/logos.md
+++ b/docs/overview/logos.md
@@ -21,7 +21,7 @@ The assets below are all in `.svg` format. Other formats are available in the
 </a>
 
 <a href="https://backstage.io/logo_assets/svg/Logo_Black.svg">
-  <img src="https://backstage.io/logo_assets/svg/Logo_Black.svg" width="600" style="background-color:white" />
+  <img src="https://backstage.io/logo_assets/svg/Logo_Black.svg" width="600" className="logoWhite" class="logoWhite" />
 </a>
 
 ## Backstage icon
@@ -37,6 +37,6 @@ The assets below are all in `.svg` format. Other formats are available in the
     <img src="https://backstage.io/logo_assets/svg/Icon_Gradient.svg" width="180" height="180" />
   </a>
   <a href="https://backstage.io/logo_assets/svg/Icon_Black.svg">
-    <img src="https://backstage.io/logo_assets/svg/Icon_Black.svg" width="180" height="180" style="background-color:white" />
+    <img src="https://backstage.io/logo_assets/svg/Icon_Black.svg" width="180" height="180" style={{"background-color":"white"}} />
   </a>
 </div>
diff --git a/microsite-next/src/css/customTheme.css b/microsite-next/src/css/customTheme.css
index 4e99bc57d3..3b71d51d62 100644
--- a/microsite-next/src/css/customTheme.css
+++ b/microsite-next/src/css/customTheme.css
@@ -19,3 +19,29 @@
 .copyright {
   font-size: 10pt;
 }
+
+/* logo.md */
+.logoWhite {
+  background-color: white;
+}
+
+/* Utility API Styling */
+.textGreen {
+  color: #82b366;
+}
+.textBlue {
+  color: #6c8ebf;
+}
+.textPurple {
+  color: #9673a6;
+}
+.textYellow {
+  color: #d6b656;
+}
+.textRed {
+  color: #b85450;
+}
+.textAlignCenter {
+  text-align: center;
+}
+/* End of Utility API Styling */
diff --git a/microsite/static/css/custom.css b/microsite/static/css/custom.css
index dd8fada3b7..e6a230ee52 100644
--- a/microsite/static/css/custom.css
+++ b/microsite/static/css/custom.css
@@ -1294,3 +1294,29 @@ h3.collapsible span.arrow {
 #Sidebar__HubSpotContainer.submitted-message p {
   color: rgb(0, 0, 0);
 }
+
+/* logo.md */
+.logoWhite {
+  background-color: white;
+}
+
+/* Utility API Styling */
+.textGreen {
+  color: #82b366;
+}
+.textBlue {
+  color: #6c8ebf;
+}
+.textPurple {
+  color: #9673a6;
+}
+.textYellow {
+  color: #d6b656;
+}
+.textRed {
+  color: #b85450;
+}
+.textAlignCenter {
+  text-align: center;
+}
+/* End of Utility API Styling */