Add styling (especially dark mode) for the asyncAPI display component (#1958)

plugins/api-docs/package.json

@@ -25,7 +25,7 @@
     "@backstage/core": "^0.1.1-alpha.18",
     "@backstage/plugin-catalog": "^0.1.1-alpha.18",
     "@backstage/theme": "^0.1.1-alpha.18",
-    "@kyma-project/asyncapi-react": "^0.6.1",
+    "@kyma-project/asyncapi-react": "^0.11.0",
     "@material-icons/font": "^1.0.2",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",

plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx

@@ -16,10 +16,133 @@
 
 import AsyncApi from '@kyma-project/asyncapi-react';
 import React, { FC } from 'react';
-import './style.css';
+import { makeStyles, fade } from '@material-ui/core/styles';
+import '@kyma-project/asyncapi-react/lib/styles/fiori.css';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& .asyncapi': {
+      'font-family': 'inherit',
+      background: 'none',
+    },
+    '& h2': {
+      ...theme.typography.h6,
+    },
+    '& .text-teal': {
+      color: theme.palette.primary.main,
+    },
+    '& button': {
+      ...theme.typography.button,
+      background: 'none',
+      boxSizing: 'border-box',
+      minWidth: 64,
+      borderRadius: theme.shape.borderRadius,
+      transition: theme.transitions.create(
+        ['background-color', 'box-shadow', 'border'],
+        {
+          duration: theme.transitions.duration.short,
+        },
+      ),
+      padding: '5px 15px',
+      color: theme.palette.primary.main,
+      border: `1px solid ${fade(theme.palette.primary.main, 0.5)}`,
+      '&:hover': {
+        textDecoration: 'none',
+        '&$disabled': {
+          backgroundColor: 'transparent',
+        },
+        border: `1px solid ${theme.palette.primary.main}`,
+        backgroundColor: fade(
+          theme.palette.primary.main,
+          theme.palette.action.hoverOpacity,
+        ),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent',
+        },
+      },
+      '&$disabled': {
+        color: theme.palette.action.disabled,
+      },
+    },
+    '& .asyncapi__collapse-button:hover': {
+      color: theme.palette.primary.main,
+    },
+    '& button.asyncapi__toggle-button': {
+      'min-width': 'inherit',
+    },
+    '& .asyncapi__info-list li': {
+      'border-color': theme.palette.primary.main,
+      '&:hover': {
+        color: theme.palette.text.primary,
+        'border-color': theme.palette.primary.main,
+        'background-color': theme.palette.primary.main,
+      },
+    },
+    '& .asyncapi__info-list li a': {
+      color: theme.palette.primary.main,
+      '&:hover': {
+        color: theme.palette.getContrastText(theme.palette.primary.main),
+      },
+    },
+    '& .asyncapi__enum': {
+      color: theme.palette.secondary.main,
+    },
+    '& .asyncapi__toggle-arrow:before': {
+      content: '">"',
+      'font-family': 'inherit',
+    },
+    '& .asyncapi__anchor-icon:before': {
+      content: '"🔗"',
+      'font-family': 'inherit',
+    },
+    '& .asyncapi__info, .asyncapi__channel, .asyncapi__channels > div, .asyncapi__schema, .asyncapi__message, .asyncapi__server, .asyncapi__servers > div, .asyncapi__messages > div, .asyncapi__schemas > div': {
+      'background-color': 'inherit',
+    },
+    '& .asyncapi__channel-parameters-header, .asyncapi__channel-operations-header': {
+      'background-color': 'inherit',
+      color: theme.palette.text.primary,
+    },
+    '& .asyncapi__additional-properties-notice': {
+      color: theme.palette.text.hint,
+    },
+    '& .asyncapi__code, .asyncapi__code-pre': {
+      background: theme.palette.background.default,
+    },
+    '& .asyncapi__schema-example-header-title': {
+      color: theme.palette.text.secondary,
+    },
+    '& .asyncapi__message-headers-header, .asyncapi__message-payload-header, .asyncapi__server-variables-header, .asyncapi__server-security-header': {
+      'background-color': 'inherit',
+      color: theme.palette.text.secondary,
+    },
+    '& .asyncapi__table-header': {
+      background: theme.palette.background.default,
+    },
+    '& .asyncapi__table-body': {
+      color: theme.palette.text.primary,
+    },
+    '& .asyncapi__server-security-flow': {
+      background: theme.palette.background.default,
+      border: 'none',
+    },
+    '& .asyncapi__server-security-flows-list a': {
+      color: theme.palette.primary.main,
+    },
+    '& .asyncapi__table-row--nested': {
+      color: theme.palette.text.secondary,
+    },
+  },
+}));
 
 export const AsyncApiDefinitionWidget: FC<{
   definition: any;
 }> = ({ definition }) => {
-  return <AsyncApi schema={definition} />;
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <AsyncApi schema={definition} />
+    </div>
+  );
 };