Fix docs card for dark mode (#2888)

Fixes #2887

Author: AndreasArvidsson

packages/cursorless-org-docs/src/css/custom.css

@@ -30,19 +30,17 @@
 }
 
 .card {
-  border: 1px solid rgba(0, 0, 0, 0.175);
+  border: 1px solid var(--ifm-color-emphasis-300);
   margin-bottom: 1rem;
 }
 
-.card-header {
-  background-color: #f8f9fa;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-  padding: 0.5rem 1rem;
-  cursor: pointer;
+.card.open > .card__header {
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  padding-bottom: 1rem;
 }
 
-.card-body {
-  padding: 1rem;
+.pointer {
+  cursor: pointer;
 }
 
 .facet-name {

packages/cursorless-org-docs/src/docs/user/languages/components/ScopeSupport.tsx

@@ -35,7 +35,7 @@ export function ScopeSupport({ languageId }: Props): JSX.Element {
         facets={supportedScopes}
         title="Supported facets"
         subtitle="These facets are supported"
-        expanded
+        open
       />
 
       <ScopeSupportForLevel

packages/cursorless-org-docs/src/docs/user/languages/components/ScopeSupportForLevel.tsx

@@ -15,17 +15,17 @@ interface Props {
   title: string;
   subtitle: string;
   description?: React.ReactNode;
-  expanded?: boolean;
+  open?: boolean;
 }
 
 export function ScopeSupportForLevel({
   facets,
   title,
   subtitle,
   description,
-  expanded: expandedProp,
+  open: openProp,
 }: Props): JSX.Element | null {
-  const [expanded, setExpanded] = useState(expandedProp ?? false);
+  const [open, setOpen] = useState(openProp ?? false);
 
   const facetInfos = facets.map(
     (facet): AugmentedFacetInfo => ({
@@ -46,12 +46,12 @@ export function ScopeSupportForLevel({
   }
 
   const renderBody = () => {
-    if (!expanded) {
+    if (!open) {
       return null;
     }
 
     return (
-      <div className="card-body">
+      <div className="card__body">
         {description && <p>{description}</p>}
 
         {scopeTypes.map((scopeType) => {
@@ -79,8 +79,8 @@ export function ScopeSupportForLevel({
   };
 
   return (
-    <div className="card">
-      <div className="card-header" onClick={() => setExpanded(!expanded)}>
+    <div className={"card pointer" + (open ? " open" : "")}>
+      <div className="card__header" onClick={() => setOpen(!open)}>
         <h3>{title}</h3>
         {subtitle}
       </div>