Dark syntax highlighting (#320)

* Disable ember-code-snippets default styles
* Ensure one version of ember-cli-clipboard
* pin assign-polyfill

Author: samselikoff

addon/components/docs-demo/template.hbs

@@ -1,4 +1,4 @@
-<div class="docs-rounded docs-border docs-my-8 {{class}}">
+<div class="docs-rounded docs-border docs-border-grey-lighter docs-my-8 {{class}}">
 
   {{yield (hash
     example=(component 'docs-demo/x-example')
@@ -7,13 +7,20 @@
 
   <div>
     {{#if (and snippets (gt snippets.length 1))}}
-      <nav class="docs-demo__snippets-nav docs-py-2 docs-px-4 docs-font-medium docs-bg-grey-lighter docs-tracking-tight">
+      <nav class="
+        docs-demo__snippets-nav docs-py-2 docs-px-4 docs-font-medium
+        docs-bg-black docs-tracking-tight docs-border-b
+        docs-border-grey-darkest
+      ">
         {{#each snippets as |snippet|}}
           <button {{action 'selectSnippet' snippet}}
             class='
               docs-mr-4 docs-text-xs docs-no-underline outline-none
-              hover:docs-text-grey-darkest
-              {{if snippet.isActive 'docs-text-grey-darkest' 'docs-text-grey-dark'}}
+              hover:docs-text-grey-lighter
+              {{if snippet.isActive
+                'docs-text-grey-lighter'
+                'docs-text-grey-dark'
+              }}
             '
           >
             {{snippet.label}}
@@ -24,7 +31,9 @@
 
     {{#each snippets as |snippet|}}
       {{#if snippet.isActive}}
-        <div class="docs-demo__snippet-wrapper {{if (lte snippets.length 1) 'docs-border-t docs-border-grey-lighter'}}">
+        <div class="
+          docs-demo__snippet-wrapper docs-bg-code-base docs-rounded-b
+        ">
           {{docs-snippet name=snippet.name unindent=true language=snippet.language}}
         </div>
       {{/if}}

addon/components/docs-snippet/template.hbs

@@ -1,18 +1,26 @@
 {{#if title}}
-  <div class='docs-bg-grey-lighter docs-text-xs docs-text-grey-darkest
-    docs-font-medium docs-py-2 docs-px-4'>
+  <div class='
+    docs-bg-black docs-text-grey-lighter docs-text-xs
+    docs-font-medium docs-py-2 docs-px-4 docs-rounded-t
+    docs-border-b docs-border-grey-darkest
+  '>
     {{title}}
   </div>
 {{/if}}
 
-<div class='docs-text-xs docs-p-4 docs-bg-grey-lightest docs-relative' data-test-id={{name}}>
+<div class='
+    docs-text-sm docs-px-2 docs-py-1 docs-bg-code-base docs-relative
+    {{if title "docs-rounded-b" "docs-rounded"}}
+  '
+  data-test-id={{name}}
+>
   {{#if showCopy}}
     {{#copy-button
       clipboardText=snippetText
       title='copy to clipboard'
       class='
         docs-absolute docs-pin-t docs-pin-r docs-bg-transparent hover:docs-bg-transparent
-        docs-border-none docs-opacity-50 hover:docs-opacity-100 docs-p-3
+        docs-border-none docs-opacity-50 hover:docs-opacity-100 docs-p-3 docs-text-white
       '
     }}
       Copy

addon/styles/addon.scss

@@ -2,8 +2,8 @@
 $site-container: 1400px;
 
 @import 'tailwind';
-@import 'syntax';
 @import 'pod-styles.scss';
+@import 'syntax';
 
 // Figure out how to do this in tailwind
 .docs-fill-current {

addon/styles/syntax.scss

@@ -1,87 +1,87 @@
+/*
+
+Original: Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+Modified for AddonDocs.
+*/
+
+$base:    #282c34;
+$mono-1:  #abb2bf;
+$mono-2:  #818896;
+$mono-3:  #5c6370;
+$hue-1:   #56b6c2;
+$hue-2:   #61aeee;
+$hue-3:   #c678dd;
+$hue-4:   #98c379;
+$hue-5:   #e06c75;
+$hue-5-2: #be5046;
+$hue-6:   #e06c75; // original #d19a66
+$hue-6-2: #e6c07b;
+
 .hljs {
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: #333;
-  background: inherit;
+  color: $mono-1;
+  background: $base;
 }
 
 .hljs-comment,
 .hljs-quote {
-  color: #8795A1;
+  color: $mono-3;
   font-style: italic;
 }
 
+.hljs-doctag,
 .hljs-keyword,
-.hljs-selector-tag,
-.hljs-subst {
-  color: #333;
-  font-weight: bold;
-}
-
-.hljs-number,
-.hljs-literal,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag .hljs-attr {
-  color: #008080;
-}
-
-.hljs-string,
-.hljs-doctag {
-  color: #d14;
+.hljs-formula {
+  color: $hue-3;
 }
 
-.hljs-title,
 .hljs-section,
-.hljs-selector-id {
-  color: #900;
-  font-weight: bold;
-}
-
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
 .hljs-subst {
-  font-weight: normal;
+  color: $hue-5;
 }
 
-.hljs-type,
-.hljs-class .hljs-title {
-  color: #458;
-  font-weight: bold;
-}
-
-.hljs-tag,
-.hljs-name,
-.hljs-attribute {
-  color: #333;
-  font-weight: normal;
+.hljs-literal {
+  color: $hue-1;
 }
 
+.hljs-string,
 .hljs-regexp,
-.hljs-link {
-  color: #009926;
-}
-
-.hljs-symbol,
-.hljs-bullet {
-  color: #990073;
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: $hue-4;
 }
 
 .hljs-built_in,
-.hljs-builtin-name {
-  color: #0086b3;
-}
-
-.hljs-meta {
-  color: #8795A1;
-  font-weight: bold;
+.hljs-class .hljs-title {
+  color: $hue-6-2;
 }
 
-.hljs-deletion {
-  background: #fdd;
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: $hue-6;
 }
 
-.hljs-addition {
-  background: #dfd;
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: $hue-2;
 }
 
 .hljs-emphasis {
@@ -92,30 +92,6 @@
   font-weight: bold;
 }
 
-
-/* My customizations*/
-.hljs-tag {
-  .hljs-name {
-    color: #22863a;
-  }
-  .hljs-attr {
-    color: #6f42c1;
-  }
-}
-.hljs-template-variable {
-  color: #005cc5;
-}
-.hljs-template-tag {
-  color: #005cc5;
-
-  .hljs-attr {
-    color: #e36209;
-  }
-}
-
-.hljs-string {
-  color: #032f62;
-}
-.hljs-name {
-  color: #005cc5;
+.hljs-link {
+  text-decoration: underline;
 }

addon/tailwind/components/docs-md.css

@@ -39,19 +39,22 @@
   @apply docs-mb-4 docs-mt-6 docs-bg-grey-lightest docs-italic docs-px-4 docs-py-3 docs-text-xs;
 }
 
-/* mb-4 on pre interferes with docs-snippet and others, really want Renderer
-to generate its own class...
-pre {
-  @apply .docs-mb-4;
-} */
-
 .docs-md__blockquote {
   @apply docs-pl-4 docs-text-grey-dark docs-border-l-4;
 }
 
+/* Applied to inline code in compiled markdown */
+.docs-md :not(pre) > code {
+  @apply docs-bg-grey-lighter docs-px-1;
+}
+
 /* Applied to fenced code in compiled markdown */
 .docs-md__code {
-  @apply docs-bg-grey-lightest docs-my-8 docs-p-6 docs-overflow-x-scroll docs-text-xs;
+  @apply docs-my-8 docs-px-4 docs-py-3 docs-overflow-x-scroll docs-text-sm docs-rounded;
+
+  /* These values are copied from atom-one-dark theme, imported from highlight.js */
+  background: #282c34;
+  color: #abb2bf;
 }
 
 .docs-md__a {

addon/tailwind/config/colors.js

@@ -35,7 +35,9 @@ export default {
 
   'yellow': '#ffed4a',
 
-  // See the ntoe in tailwind/compnents/docs-brand-colors.css
+  'code-base': '#282c34',
+
+  // See the note in tailwind/compnents/docs-brand-colors.css
   'brand-var': 'var(--brand-primary, #E04E39)'
 
 };

config/dependency-lint.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+
+};

index.js

@@ -18,16 +18,6 @@ module.exports = {
   LATEST_VERSION_NAME,
 
   options: {
-    nodeAssets: {
-      'highlight.js': {
-        public: {
-          include: [ 'styles/monokai.css' ]
-        },
-        vendor: {
-          include: [ 'styles/monokai.css' ]
-        }
-      }
-    },
     svgJar: {
       sourceDirs: [
         'public',
@@ -91,6 +81,17 @@ module.exports = {
       throw new Error(`ember-cli-addon-docs only currently works with addons, not applications`);
     }
 
+    includer.options.includeFileExtensionInSnippetNames = includer.options.includeFileExtensionInSnippetNames || false;
+    includer.options.snippetSearchPaths = includer.options.snippetSearchPaths || ['tests/dummy/app'];
+    includer.options.snippetRegexes = Object.assign({}, {
+      begin: /{{#(?:docs-snippet|demo.example)\sname=(?:"|')(\S+)(?:"|')/,
+      end: /{{\/(?:docs-snippet|demo.example)}}/,
+    }, includer.options.snippetRegexes);
+    includer.options.includehighlightJS = false;
+    includer.options.includeHighlightStyle = false;
+    includer.options.snippetExtensions = ['js', 'css', 'scss', 'hbs', 'md', 'text', 'json', 'handlebars', 'htmlbars', 'html', 'diff'];
+
+    // This must come after we add our own options above, or else other addons won't see them.
     this._super.included.apply(this, arguments);
 
     const hasPlugins = this.project.addons.some(function(addon) {
@@ -106,23 +107,11 @@ module.exports = {
     this.addonOptions = Object.assign({}, includer.options['ember-cli-addon-docs']);
     this.addonOptions.projects = Object.assign({}, this.addonOptions.projects);
 
-    includer.options.includeFileExtensionInSnippetNames = includer.options.includeFileExtensionInSnippetNames || false;
-    includer.options.snippetSearchPaths = includer.options.snippetSearchPaths || ['tests/dummy/app'];
-    includer.options.snippetRegexes = Object.assign({}, {
-      begin: /{{#(?:docs-snippet|demo.example)\sname=(?:"|')(\S+)(?:"|')/,
-      end: /{{\/(?:docs-snippet|demo.example)}}/,
-    }, includer.options.snippetRegexes);
-
     let importer = findImporter(this);
 
     importer.import('vendor/lunr/lunr.js', {
       using: [{ transformation: 'amd', as: 'lunr' }]
     });
-
-    // importer.import('vendor/highlightjs-styles/default.css');
-    // importer.import('vendor/styles/highlightjs-styles/default.css');
-    // importer.import('vendor/highlight.js/styles/monokai.css');
-    // importer.import('vendor/highlightjs-styles/github.css');
   },
 
   createDeployPlugin() {
@@ -180,7 +169,7 @@ module.exports = {
   treeForVendor(vendor) {
     return new MergeTrees([
       vendor,
-      this._highlightJSTree(),
+      // this._highlightJSTree(),
       this._lunrTree()
     ].filter(Boolean));
   },