Improved docs header and syntax highlight styles

Author: aomarks

packages/lit-dev-content/site/css/docs.css

@@ -40,6 +40,10 @@ article {
  * Body text
  * ------------------------------------ */
 
+ article {
+   color: #3E3E3E;
+ }
+
 article p {
   margin-block-start: 1.5em;
   margin-block-end: 1.5em;
@@ -70,6 +74,7 @@ article code:not([class]) {
 .CodeMirror {
   padding: 0.5em 1em;
   --playground-code-background: #f5f5f5;
+  color: #3c3c3c;
 }
 
 /* Playground examples */
@@ -92,6 +97,30 @@ playground-ide {
   background: var(--playground-code-background);
 }
 
+/* Color theme */
+html {
+  --playground-code-background: #f0f0f0;
+  --playground-code-keyword-color: #d73a49;
+  --playground-code-atom-color: #005cc5;
+  --playground-code-number-color: #005cc5;
+  --playground-code-def-color: #6f42c1;
+  --playground-code-variable-color: #6f42c1;
+  --playground-code-property-color: #e36209;
+  --playground-code-operator-color: #d73a49;
+  --playground-code-variable-2-color: #000000;
+  --playground-code-variable-3-color: #000000;
+  --playground-code-type-color: #005cc5;
+  --playground-code-comment-color: #6a737d;
+  --playground-code-string-color: #032f62;
+  --playground-code-string-2-color: #032f62;
+  --playground-code-meta-color: #000000;
+  --playground-code-qualifier-color: #6f42c1;
+  --playground-code-builtin-color: #6f42c1;
+  --playground-code-tag-color: #032f62;
+  --playground-code-attribute-color: #6f42c1;
+  --playground-code-callee-color: #005cc5;
+}
+
 /* ------------------------------------
  * Headings
  * ------------------------------------ */
@@ -104,12 +133,27 @@ article h1 {
 }
 
 article h2 {
-  color: var(--color-blue);
-  font-size: 1.36em;
+  color: #3b4b64;
+  font-size: 1.8em;
+  font-weight: 600;
+  position: relative;
+}
+
+article h2:not(:first-of-type) {
+  border-top: 1px solid #d1d1d1;
+  padding: 1.5em 0 0.5em 0;
+  margin-top: 1.5em;
 }
 
 article h3 {
+  color: #647086;
+  font-size: 1.2em;
   font-weight: 600;
+  position: relative;
+}
+
+article h3 {
+  margin-top: 2.2em;
 }
 
 article h4 {
@@ -130,6 +174,14 @@ article > h1:first-of-type {
   margin-top: 0;
 }
 
+/* ------------------------------------
+ * Lists
+ * ------------------------------------ */
+
+ article li {
+   padding-inline: 1em 10%;
+ }
+
 /* ------------------------------------
  * Tables
  * ------------------------------------ */
@@ -294,6 +346,11 @@ td {
   display: none;
 }
 
+#inlineToc h2 {
+  font-size: 1.5em;
+  color: black;
+}
+
 #inlineToc ol {
   list-style: disc;
 }
@@ -343,7 +400,7 @@ td {
 
 #rhsToc > div > ol > li:not(:first-of-type) {
   /* Space between top-level lists */
-  margin-top: 1em;
+  margin-top: 0.2em;
 }
 
 /* Second level */
@@ -369,11 +426,12 @@ td {
   color: black;
   opacity: 0.5;
   font-size: 0.8em;
+  position: relative;
 }
 
-#rhsToc a.active {
+#rhsToc a.active,
+#rhsToc a:hover {
   opacity: 1;
-  position: relative;
 }
 
 /* Active section bullet */