fix: details summary arrow (#1479)

Author: katzino

src/theme/Details/index.js

@@ -0,0 +1,16 @@
+import { Details as DetailsGeneric } from '@docusaurus/theme-common/Details';
+import clsx from 'clsx';
+import React from 'react';
+
+import styles from './styles.module.css';
+// Should we have a custom details/summary comp in Infima instead of reusing
+// alert classes?
+const InfimaClasses = 'alert alert--info';
+export default function Details({ ...props }) {
+    return (
+        <DetailsGeneric
+            {...props}
+            className={clsx(InfimaClasses, styles.details, props.className)}
+        />
+    );
+}

src/theme/Details/styles.module.css

@@ -0,0 +1,15 @@
+.details {
+  --docusaurus-details-summary-arrow-size: 0.6rem;
+  --docusaurus-details-decoration-color: var(--ifm-alert-border-color);
+  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
+  margin: 0 0 var(--ifm-spacing-vertical);
+  border: 1px solid var(--ifm-alert-border-color);
+
+  & > summary {
+    padding-left: 1.6rem;
+
+    &::before {
+      top: 0.6rem;
+    }
+  }
+}