Checkpoint

- Expose some coreui theme values as custom css properties
- Replace ExpandablePanel with <details>
- Replace SCSS file with CSS file

packages/libs/coreui/src/components/theming/UIThemeProvider.tsx

@@ -14,13 +14,23 @@ export default function UIThemeProvider({
   children,
 }: UIThemeProviderProps) {
   useCoreUIFonts();
+  // In addition to making the theme available via React Context,
+  // we will also expose the theme as custom CSS properties.
   return (
     <ThemeProvider theme={theme}>
       <Global
         styles={css`
+          :root {
+            --coreui-color-primary: ${theme.palette.primary.hue[
+              theme.palette.primary.level
+            ]};
+            --coreui-color-secondary: ${theme.palette.secondary.hue[
+              theme.palette.secondary.level
+            ]};
+          }
+
           *:focus-visible {
-            outline: 2px solid
-              ${theme.palette.primary.hue[theme.palette.primary.level]};
+            outline: 2px solid var(--coreui-color-primary);
           }
         `}
       />

packages/libs/eda/src/lib/notebook/EdaNotebook.css

@@ -0,0 +1,116 @@
+.EdaNotebook {
+  .Heading {
+    display: flex;
+    gap: 2em;
+    align-items: baseline;
+  }
+
+  .Paper {
+    /* A4 dimensions */
+    --paper-width: 2480px;
+    --paper-height: 3508px;
+    --paper-scale: 0.5;
+
+    width: calc(var(--paper-width) * var(--paper-scale));
+    /* height: calc(var(--paper-height) * var(--paper-scale)); */
+
+    padding: 2em;
+    margin: 1em auto;
+
+    /* background-color: #f3f3f3; */
+    box-shadow: 0 0 2px #b5b5b5;
+
+    > * + * {
+      margin-block-start: 1rem;
+    }
+
+    .Heading {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      gap: 0.5em;
+
+      h1 {
+        padding: 0;
+        font-size: 1.75em;
+      }
+
+      h2 {
+        font-size: 1em;
+        font-weight: bold;
+        padding: 0.25em 0.5em;
+        color: var(--coreui-color-primary, black);
+        border: 2px solid;
+        border-radius: 0.25em;
+        background-color: color-mix(
+          in srgb,
+          var(--coreui-color-primary) 5%,
+          transparent
+        );
+      }
+    }
+
+    > details {
+      border: 1px solid;
+      border-color: color-mix(
+        in srgb,
+        var(--coreui-color-primary) 30%,
+        transparent
+      );
+      border-top-left-radius: 0.5em;
+      border-top-right-radius: 0.5em;
+      border-bottom-left-radius: 0.5em;
+      border-bottom-right-radius: 0.5em;
+
+      > summary {
+        padding: 0.75em;
+        cursor: pointer;
+        font-size: 1.2em;
+        font-weight: 500;
+        background-color: color-mix(
+          in srgb,
+          var(--coreui-color-primary) 10%,
+          transparent
+        );
+
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            var(--coreui-color-primary) 20%,
+            transparent
+          );
+        }
+
+        &:active {
+          background-color: color-mix(
+            in srgb,
+            var(--coreui-color-primary) 15%,
+            transparent
+          );
+        }
+
+        transition: background-color 100ms ease-in;
+      }
+
+      &[open] > summary {
+        border-bottom: 1px solid;
+        border-color: color-mix(
+          in srgb,
+          var(--coreui-color-primary) 30%,
+          transparent
+        );
+      }
+
+      > div {
+        padding: 1em;
+      }
+    }
+  }
+
+  .Title {
+    fieldset {
+      padding: 0;
+      margin: 0;
+    }
+  }
+}

packages/libs/eda/src/lib/notebook/EdaNotebookAnalysis.tsx

@@ -18,7 +18,7 @@ import { ExpandablePanel } from '@veupathdb/coreui';
 import { NotebookCell as NotebookCellType } from './Types';
 import { NotebookCell } from './NotebookCell';
 
-import './EdaNotebook.scss';
+import './EdaNotebook.css';
 
 interface NotebookSettings {
   /** Ordered array of notebook cells */
@@ -70,30 +70,26 @@ export function EdaNotebookAnalysis(props: Props) {
   );
   return (
     <div className="EdaNotebook">
-      <div className="Heading">
-        <h1>EDA Notebook</h1>
-      </div>
       <div className="Paper">
-        <div>
-          <h2>
+        <div className="Heading">
+          <h1>
             <SaveableTextEditor
               className="Title"
               value={analysisState.analysis?.displayName ?? ''}
               onSave={analysisState.setName}
             />
-          </h2>
-          <h3>Study: {safeHtml(studyRecord.displayName)}</h3>
+          </h1>
+          <h2>{safeHtml(studyRecord.displayName)}</h2>
         </div>
         {notebookSettings.cells.map((cell, index) => (
-          <ExpandablePanel title={cell.title} subTitle={{}} themeRole="primary">
-            <div style={{ padding: '1em' }}>
-              <NotebookCell
-                analysisState={analysisState}
-                cell={cell}
-                updateCell={(update) => updateCell(update, index)}
-              />
-            </div>
-          </ExpandablePanel>
+          <details>
+            <summary>{cell.title}</summary>
+            <NotebookCell
+              analysisState={analysisState}
+              cell={cell}
+              updateCell={(update) => updateCell(update, index)}
+            />
+          </details>
         ))}
       </div>
     </div>