From c8fd900afbbd86859f1de670364f731bc6cfdecd Mon Sep 17 00:00:00 2001
From: Scott Guymer <scott.guymer@philips.com>
Date: Wed, 28 Jun 2023 21:47:45 +0200
Subject: [PATCH] fix: Use themeable styling for markdown

Signed-off-by: Scott Guymer <scott.guymer@philips.com>
---
 .../components/Form/DescriptionFieldTemplate.tsx     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/plugins/scaffolder-react/src/next/components/Form/DescriptionFieldTemplate.tsx b/plugins/scaffolder-react/src/next/components/Form/DescriptionFieldTemplate.tsx
index 8debfb3e08..4c86ef0c62 100644
--- a/plugins/scaffolder-react/src/next/components/Form/DescriptionFieldTemplate.tsx
+++ b/plugins/scaffolder-react/src/next/components/Form/DescriptionFieldTemplate.tsx
@@ -24,17 +24,17 @@ import {
   StrictRJSFSchema,
 } from '@rjsf/utils';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   markdownDescription: {
-    fontSize: '0.75rem',
+    fontSize: theme.typography.caption.fontSize,
     margin: 0,
-    marginTop: '5px',
-    color: 'rgba(0, 0, 0, 0.54)',
-    '& p:first-child': {
+    color: theme.palette.text.secondary,
+    '& :first-child': {
       margin: 0,
+      marginTop: '3px', // to keep the standard browser padding
     },
   },
-});
+}));
 
 /** The `DescriptionField` is the template to use to render the description of a field
  * @alpha