fix(PLOS): Refine theme for WebComponent compatibility

src/themes/plos/components.css

@@ -0,0 +1,31 @@
+/* Overrides for Stencila components */
+:--root {
+  a.button.sc-stencila-button-default,
+  button.sc-stencila-button-default {
+    font-family: var(--font-family-body);
+  }
+
+  stencila-executable-document-toolbar {
+    --background: var(--figure-bg-color);
+
+    stencila-button button,
+    stencila-button .button {
+      &:not([disabled]):hover {
+        background-color: var(--link-color) !important;
+        color: var(--bg-color) !important;
+      }
+    }
+
+    &[position='fixed'] + * {
+      margin-top: 6rem;
+    }
+  }
+
+  /* stencila-executable-document-toolbar[position='fixed'] + * {
+    margin-top: 6rem;
+  } */
+
+  & > stencila-tooltip-element {
+    width: auto;
+  }
+}

src/themes/plos/index.ts

@@ -1 +1,6 @@
 import '../../extensions/code'
+
+// Use solid icons for Stencila components
+document
+  .getElementsByTagName('html')[0]
+  ?.setAttribute('data-icon-style', 'fill')

src/themes/plos/styles.css

@@ -8,6 +8,7 @@
 @import '../../extensions/person/styles.css';
 
 @import '../../fonts/openSans/openSans.css';
+@import './components.css';
 
 :--root {
   --bg-color: #fff;
@@ -29,6 +30,17 @@
   --secondary-font: 'Open Sans', helvetica, arial, sans-serif;
   --text-color: #202020;
 
+  /* Neutral: For backgrounds and borders. */
+  --color-neutral-100: #f7f7f7;
+  --color-neutral-200: var(--figure-bg-color);
+  --color-neutral-300: #c0c0c0;
+  --color-neutral-400: #bbbbbb;
+  --color-neutral-500: #777777;
+  --color-neutral-600: #666666;
+  --color-neutral-700: #606060;
+  --color-neutral-800: #545454;
+  --color-neutral-900: #333333;
+
   * {
     box-sizing: border-box;
   }
@@ -92,6 +104,7 @@
 :--Figure,
 :--Table,
 :--CodeBlock,
+:--CodeBlock[class*='language-'],
 :--CodeChunk {
   max-width: var(--max-width);
   margin-left: auto;
@@ -192,6 +205,7 @@ h6:--Heading {
 
 :--Figure,
 :--CodeChunk {
+  border-radius: 0;
   font-family: var(--body-font);
   margin: 1.25rem auto;
   overflow: auto;
@@ -205,20 +219,35 @@ h6:--Heading {
     display: block;
     max-width: 100%;
     height: auto;
-    padding: 1.125rem;
+    margin-bottom: 1.125rem;
+
+    &:not(:first-child) {
+      margin-top: 1.125rem;
+    }
+  }
+}
+
+:--Figure {
+  padding: 18px 1.25rem 1.25rem;
+
+  :--label {
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 600;
   }
 }
 
 :--caption,
 :--Figure figcaption {
   font-size: var(--font-size-body);
   width: 100%;
-  padding: 0 1.125rem 1.125rem;
 
   :--Heading,
   :--title {
+    font-size: var(--font-size-body);
     font-weight: var(--secondary-font-weight);
     line-height: 1.84615;
+    margin-bottom: 0;
   }
 
   *:last-child {
@@ -322,6 +351,8 @@ h6:--Heading {
     color: inherit;
     display: inline;
     font-size: inherit;
+    font-weight: normal;
+    line-height: 1.125rem;
 
     &:first-of-type {
       display: none;
@@ -339,6 +370,7 @@ h6:--Heading {
   :--authors,
   :--affiliations {
     color: var(--text-color);
+    margin-bottom: 0;
   }
 
   :--authors + :--datePublished {