New playground design

packages/lit-dev-content/package.json

@@ -47,6 +47,7 @@
     "@material/mwc-button": "^0.20.0",
     "@material/mwc-drawer": "^0.20.0",
     "@material/mwc-icon-button": "^0.20.0",
+    "@material/mwc-icon-button-toggle": "^0.20.0",
     "@material/mwc-snackbar": "^0.20.0",
     "lit": "^2.0.0-pre.1",
     "lit-element": "^2.3.1",

packages/lit-dev-content/rollup.config.js

@@ -31,6 +31,7 @@ export default [
   {
     input: [
       'lib/components/copy-button.js',
+      'lib/components/litdev-drawer.js',
       'lib/components/litdev-example.js',
       'lib/components/litdev-tutorial.js',
       'lib/components/playground-elements.js',

packages/lit-dev-content/site/_includes/docs.html

@@ -16,7 +16,7 @@
   {% set toc = content | toc %}
 
 
-  <div id="docsNavWrapper">
+  <div id="docsNavWrapper" class="minimalScroller">
     <nav id="docsNav">
       <ol>{% include 'docs-nav.html' %}</ol>
     </nav>

packages/lit-dev-content/site/_includes/post.html

@@ -0,0 +1,41 @@
+{% extends 'default.html' %}
+
+{% block head %}
+  {% inlinecss "docs.css" %}
+  {% inlinejs "docs.js" %}
+  {% if '/api/' in page.url %}
+    {% inlinecss "docs-api.css" %}
+  {% endif %}
+{% endblock %}
+
+{% block drawer %}
+  {% include 'eleventy-nav.html' %}
+{% endblock %}
+
+{% block content %}
+  <div id="docsNavWrapper">
+    <nav id="docsNav" class="minimalScroller">
+      <ol>{% include 'eleventy-nav.html' %}</ol>
+    </nav>
+  </div>
+
+  <div id="rhsTocWrapper">
+    <nav id="rhsToc">
+      <h2>Contents</h2>
+      {{ content | toc | safe }}
+    </nav>
+  </div>
+
+  <article>
+    <h1>{{ title }}</h1>
+
+    <nav id="inlineToc">
+      <details>
+        <summary><h2>Contents</h2></summary>
+        {{ content | toc | safe }}
+      </details>
+    </nav>
+
+    {{ content | safe }}
+  </article>
+{% endblock %}

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

@@ -1,9 +1,13 @@
 html {
-  --playground-code-font-family: "Roboto Mono", monospace;
+  --playground-code-font-family: 'Roboto Mono', monospace;
   --playground-code-font-size: 14px;
   --playground-code-line-height: 1.8em;
   --playground-code-padding: 0.5em 0 0.5em 1em;
-  --playground-highlight-color: #005cc5;
+  --playground-bar-height: 2.5rem;
+  --playground-code-gutter-background: white;
+  --playground-code-gutter-border-right: none;
+
+  --playground-highlight-color: var(--color-blue);
   --playground-code-keyword-color: #d73a49;
   --playground-code-atom-color: #005cc5;
   --playground-code-number-color: #005cc5;
@@ -28,3 +32,31 @@ html {
 .CodeMirror {
   overflow-y: auto;
 }
+
+playground-preview,
+playground-ide::part(preview) {
+  background: var(--color-light-gray);
+}
+
+playground-ide::part(preview-toolbar),
+playground-preview::part(preview-toolbar) {
+  background: var(--color-light-gray);
+  border-bottom: 1.5px solid #ccc;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 0.9rem;
+  box-sizing: border-box;
+}
+
+playground-ide::part(tab-bar),
+playground-tab-bar {
+  background: white;
+  --mdc-typography-button-font-family: 'Open Sans', sans-serif;
+}
+
+playground-file-editor,
+playground-ide::part(editor) {
+  background: white;
+  border-top: 1.5px solid #ccc;
+  /* Align border with active tab highlight */
+  margin-top: -1.5px;
+}

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

@@ -452,17 +452,8 @@ td {
   text-decoration: underline;
 }
 
-/* On some platforms like Linux, a traditional scrollbar will be always visible
-   on the nav, which is quite distracting. This reproduces something similar to
-   macOS style on all platforms. */
-#docsNavWrapper::-webkit-scrollbar {
-  width: 15px;
-}
 #docsNavWrapper:hover::-webkit-scrollbar-thumb {
   background: #d6d6d6;
-  background-clip: content-box;
-  border: 4px solid transparent;
-  border-radius: 10px;
 }
 
 /* ------------------------------------

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

@@ -40,6 +40,19 @@ a {
   color: #1879cd;
 }
 
+/* On some platforms like Linux, a traditional scrollbar will be always visible
+   on the nav, which is quite distracting. This reproduces something similar to
+   macOS style on all platforms. */
+.minimalScroller::-webkit-scrollbar {
+  width: 15px;
+}
+.minimalScroller:hover::-webkit-scrollbar-thumb {
+  background: rgb(255 255 255 / 0.3);
+  background-clip: content-box !important;
+  border: 4px solid transparent;
+  border-radius: 10px;
+}
+
 /* Hide something visually in a way that screen readers will read. */
 .offscreen {
   position: absolute;