chore: adding ANypoiont and dark theme demo

demo/element/app.js

@@ -2,6 +2,7 @@ import { html } from 'lit-html';
 import '@anypoint-web-components/anypoint-dropdown/anypoint-dropdown.js';
 import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
 import '@anypoint-web-components/anypoint-item/anypoint-item.js';
+import '@anypoint-web-components/anypoint-styles/colors.js';
 import '../../api-console.js';
 import { DemoBase } from '../demo-base.js';
 

demo/index.html

@@ -96,8 +96,12 @@ <h1>API console demo pages</h1>
       <a href="standalone/index.html">standalone/index.html</a>
     </div>
     <div class="list-item">
-      <p>API console with custom theme</p>
-      <a href="element/themed.html">element/themed.html</a>
+      <p>API console with Anypoint theme</p>
+      <a href="themed/anypoint.html">themed/anypoint.html</a>
+    </div>
+    <div class="list-item">
+      <p>API console with dark theme</p>
+      <a href="themed/dark.html">themed/dark.html</a>
     </div>
   </main>
 </body>

demo/themed/anypoint-theme.css

@@ -0,0 +1,68 @@
+html {
+  font-family: var(--font-family);
+  font-size: var(--font-body-font-size);
+  --primary-color: var(--anypoint-color-primary);
+  --secondary-color: var(--anypoint-color-secondary);
+  --primary-background-color: var(--anypoint-color-tertiary);
+  --accent-color: var(--anypoint-color-primary);
+
+  --arc-font-body1-font-size: var(--font-body-font-size);
+  --arc-font-body1-font-weight: var(--font-body-font-weight);
+  --arc-font-body1-line-height: 20px;
+  --arc-font-code-family: var(--font-code-family);
+
+  --arc-font-headline-font-size: var(--font-header1-font-size);
+  --arc-font-headline-font-weight: var(--font-header1-font-weight);
+  --arc-font-headline-letter-spacing: var(--font-header1-letter-spacing);
+  --arc-font-headline-line-height: 32px;
+
+  --arc-font-subhead-font-size: var(--font-header4-font-size);
+  --arc-font-subhead-font-weight: var(--font-header4-font-weight);
+  --arc-font-subhead-line-height: 24px;
+
+  /* HTTP methods colors */
+  --method-display-selected-color: #fff;
+  --method-display-get-color: var(--anypoint-color-viridian3);
+  --method-display-post-color: var(--anypoint-color-violet3);
+  --method-display-put-color: var(--anypoint-color-yellow3);
+  --method-display-patch-color: var(--anypoint-color-indigo3);
+  --method-display-delete-color: var(--anypoint-color-red3);
+  --method-display-options-color: var(--anypoint-color-teal3);
+  --method-display-head-color: var(--anypoint-color-futureGreen3);
+  /* HTTP methods colors in method documentation panel */
+  --http-method-label-border-radius: 1px;
+  --http-method-label-get-background-color: var(--method-display-get-color);
+  --http-method-label-get-color: #fff;
+  --http-method-label-post-background-color: var(--method-display-post-color);
+  --http-method-label-post-color: #fff;
+  --http-method-label-put-background-color: var(--method-display-put-color);
+  --http-method-label-put-color: #fff;
+  --http-method-label-patch-background-color: var(--method-display-patch-color);
+  --http-method-label-patch-color: #fff;
+  --http-method-label-delete-background-color: var(--method-display-delete-color);
+  --http-method-label-delete-color: #fff;
+  --http-method-label-options-background-color: var(--method-display-options-color);
+  --http-method-label-options-color: #fff;
+  --http-method-label-head-background-color: var(--method-display-head-color);
+  --http-method-label-head-color: #fff;
+  --http-method-label-padding: 4px 5px;
+  --method-display-font-weigth: 100;
+
+  --api-navigation-list-item-selected-background-color: #e8e9ea;
+  --api-navigation-list-item-selected-color: #000;
+
+
+  --api-method-documentation-url-border-radius: 0;
+
+  --api-method-documentation-section-background-color: #f9fafb;
+  --api-method-documentation-section-padding: 5px;
+
+  --code-background-color: #f4f5f6;
+  --api-type-document-type-background-color: transparent;
+  --api-type-document-type-color: #000;
+  --api-type-document-trait-data-type-font-weight: 400;
+  --api-type-document-trait-data-type-padding: 2px 0;
+  --property-shape-document-object-color: transparent;
+  --property-shape-document-array-color: transparent;
+  --property-shape-document-union-color: transparent;
+}

demo/themed/anypoint.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <title>Themed API Console demo</title>
+  <script src="../../node_modules/web-animations-js/web-animations.min.js"></script>
+  <script src="../../node_modules/web-animations-js/web-animations-next.min.js"></script>
+  <script src="../../node_modules/cryptojslib/components/core.js"></script>
+  <script src="../../node_modules/cryptojslib/rollups/sha1.js"></script>
+  <script src="../../node_modules/cryptojslib/components/enc-base64-min.js"></script>
+  <script src="../../node_modules/cryptojslib/rollups/md5.js"></script>
+  <script src="../../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
+  <script src="../../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
+  <!--
+  Previously this was included into the compoennt.
+  Since compoennts are ES6 modules this libraries cannot be loaded into
+  the component as they do not export anything and won't set global variable.
+  -->
+  <script src="../../node_modules/jsonlint/lib/jsonlint.js"></script>
+  <script src="../../node_modules/codemirror/lib/codemirror.js"></script>
+  <script src="../../node_modules/codemirror/addon/mode/loadmode.js"></script>
+  <script src="../../node_modules/codemirror/mode/meta.js"></script>
+  <script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
+  <script src="../../node_modules/codemirror/mode/xml/xml.js"></script>
+  <script src="../../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
+  <script src="../../node_modules/codemirror/addon/lint/lint.js"></script>
+  <script src="../../node_modules/codemirror/addon/lint/json-lint.js"></script>
+  <!--
+  From the inside of a web component it is hard to determine where
+  scripts are actually located. This should be set if the page won't load all possible
+  scripts at run time. The component will download the "mode" from this location.
+  -->
+  <script>
+  /* global CodeMirror */
+  CodeMirror.modeURL = '../../node_modules/codemirror/mode/%N/%N.js';
+  </script>
+  <link rel="stylesheet" type="text/css" href="./anypoint-theme.css">
+  <style>
+  html, body {
+    margin: 0;
+    padding: 0;
+    font-size: 15px;
+    color: #424242;
+    height: 100%;
+  }
+
+  .api-dropdown {
+    --anypoint-dropdown-menu-background-color: #1c2831;
+    --anypoint-dropdown-menu-label-color: #fff;
+  }
+  </style>
+</head>
+
+<body>
+  <div id="demo"></div>
+  <script type="module" src="./anypoint.js" async></script>
+</body>
+
+</html>

demo/themed/anypoint.js

@@ -0,0 +1,48 @@
+import { html } from 'lit-html';
+import '@anypoint-web-components/anypoint-dropdown/anypoint-dropdown.js';
+import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
+import '@anypoint-web-components/anypoint-item/anypoint-item.js';
+import '@anypoint-web-components/anypoint-styles/colors.js';
+import '@anypoint-web-components/anypoint-styles/typography.js';
+import '../../api-console-app.js';
+import { DemoBase } from '../demo-base.js';
+
+class ApicApplication extends DemoBase {
+  constructor() {
+    super();
+    this.apis = [
+      ['google-drive-api', 'Google Drive API'],
+      ['httpbin', 'HTTPbin API'],
+      ['exchange-experience-api', 'Exchange Experience API'],
+      ['data-type-fragment', 'RAML data type fragment'],
+      ['demo-api', 'Demo API']
+    ];
+  }
+
+  demoTemplate() {
+    return html`<api-console-app
+      app
+      redirecturi="https://auth.advancedrestclient.com/oauth-popup.html"
+      oauth2clientid="821776164331-rserncqpdsq32lmbf5cfeolgcoujb6fm.apps.googleusercontent.com"
+      compatibility>
+      <anypoint-icon-button
+        slot="toolbar"
+        aria-label="Activate to open API selection menu"
+        title="Open API selection menu"
+        @click="${this.openApiSelector}">
+        <iron-icon icon="arc:more-vert"></iron-icon>
+      </anypoint-icon-button>
+    </api-console-app>
+    ${this.apiSelectorTemplate()}
+    `;
+  }
+
+  firstRendered() {
+    this.selectFirstApi();
+  }
+}
+
+const demo = new ApicApplication();
+demo.initialize();
+demo.render();
+window.demo = demo;