adobe · devongovett · Feb 6, 2020 · Feb 6, 2020
diff --git a/packages/@react-spectrum/theme-default/src/index.ts b/packages/@react-spectrum/theme-default/src/index.ts
@@ -1,8 +1,8 @@
-import dark from '@adobe/spectrum-css-temp/vars/spectrum-dark-unique.css';
+import dark from '@adobe/spectrum-css-temp/vars/spectrum-dark.css';
 import global from '@adobe/spectrum-css-temp/vars/spectrum-global.css';
-import large from '@adobe/spectrum-css-temp/vars/spectrum-large-unique.css';
-import light from '@adobe/spectrum-css-temp/vars/spectrum-light-unique.css';
-import medium from '@adobe/spectrum-css-temp/vars/spectrum-medium-unique.css';
+import large from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
+import light from '@adobe/spectrum-css-temp/vars/spectrum-light.css';
+import medium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
 import {Theme} from '@react-types/provider';
 
 export let theme: Theme = {

diff --git a/packages/dev/docs/package.json b/packages/dev/docs/package.json
@@ -7,6 +7,7 @@
     "@adobe/spectrum-css-temp": "^3.0.0-alpha.1",
     "@react-spectrum/provider": "^3.0.0-rc.1",
     "@react-spectrum/theme-default": "^3.0.0-rc.1",
+    "classnames": "^2.2.6",
     "react": "^16.8.0"
   }
 }
diff --git a/packages/dev/docs/src/Layout.js b/packages/dev/docs/src/Layout.js
@@ -1,4 +1,6 @@
+import classNames from 'classnames';
 import docStyles from './docs.css';
+import highlightCss from './hljs.css';
 import path from 'path';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
@@ -14,7 +16,7 @@ export function Layout({scripts, styles, pages, children}) {
         {scripts.map(s => <link rel="preload" as="script" href={s.url} />)}
       </head>
       <body>
-        <Provider theme={theme} colorScheme="light" scale="medium" UNSAFE_className={docStyles.provider}>
+        <Provider theme={theme} colorScheme="light" scale="medium" UNSAFE_className={classNames(docStyles.provider, highlightCss.spectrum)}>
           <nav className={docStyles.nav}>
             <ul className={sideNavStyles['spectrum-SideNav']}>
               {pages.map(p => (
@@ -25,7 +27,9 @@ export function Layout({scripts, styles, pages, children}) {
             </ul>
           </nav>
           <main>
-            <article>{children}</article>
+            <article>
+              {children}
+            </article>
           </main>
         </Provider>
         {scripts.map(s => <script type={s.type} src={s.url} />)}

diff --git a/packages/dev/docs/src/hljs.css b/packages/dev/docs/src/hljs.css
@@ -0,0 +1,89 @@
+
+.spectrum {
+  --hljs-color: var(--spectrum-global-color-gray-800);
+  --hljs-background: var(--spectrum-global-color-gray-75);
+  --hljs-keyword-color: var(--spectrum-global-color-fuchsia-600);
+  --hljs-section-color: var(--spectrum-global-color-red-600);
+  --hljs-literal-color: var(--spectrum-global-color-blue-600);
+  --hljs-attribute-color: var(--spectrum-global-color-celery-600);
+  --hljs-class-color: var(--spectrum-global-color-yellow-600);
+  --hljs-variable-color: var(--spectrum-global-color-orange-600);
+  --hljs-title-color: var(--spectrum-global-color-indigo-600);
+}
+
+:global(.hljs) {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: var(--hljs-color);
+  background: var(--hljs-background);
+}
+
+:global(.hljs-comment),
+:global(.hljs-quote) {
+  color: #a0a1a7;
+  font-style: italic;
+}
+
+:global(.hljs-doctag),
+:global(.hljs-formula),
+:global(.hljs-keyword) {
+  color: var(--hljs-keyword-color);
+}
+
+:global(.hljs-deletion),
+:global(.hljs-name),
+:global(.hljs-section),
+:global(.hljs-selector-tag),
+:global(.hljs-subst) {
+  color: var(--hljs-section-color);
+}
+
+:global(.hljs-literal) {
+  color: var(--hljs-literal-color);
+}
+
+:global(.hljs-addition),
+:global(.hljs-attribute),
+:global(.hljs-meta-string),
+:global(.hljs-regexp),
+:global(.hljs-string) {
+  color: var(--hljs-attribute-color);
+}
+
+:global(.hljs-built_in),
+:global(.hljs-class) :global(.hljs-title) {
+  color: var(--hljs-class-color);
+}
+
+:global(.hljs-attr),
+:global(.hljs-number),
+:global(.hljs-selector-attr),
+:global(.hljs-selector-class),
+:global(.hljs-selector-pseudo),
+:global(.hljs-template-variable),
+:global(.hljs-type),
+:global(.hljs-variable) {
+  color: var(--hljs-variable-color);
+}
+
+:global(.hljs-bullet),
+:global(.hljs-link),
+:global(.hljs-meta),
+:global(.hljs-selector-id),
+:global(.hljs-symbol),
+:global(.hljs-title) {
+  color: var(--hljs-title-color);
+}
+
+:global(.hljs-emphasis) {
+  font-style: italic;
+}
+
+:global(.hljs-strong) {
+  font-weight: bold;
+}
+
+:global(.hljs-link) {
+  text-decoration: underline;
+}
diff --git a/packages/dev/parcel-transformer-mdx-docs/MDXTransformer.js b/packages/dev/parcel-transformer-mdx-docs/MDXTransformer.js
@@ -1,6 +1,7 @@
 const {Transformer} = require('@parcel/plugin');
 const mdx = require('@mdx-js/mdx');
 const flatMap = require('unist-util-flatmap');
+const highlight = require('remark-highlight.js')
 
 module.exports = new Transformer({
   async transform({asset}) {
@@ -44,13 +45,13 @@ module.exports = new Transformer({
         return [node];
       });
     };
-    
+
     const compiled = await mdx(await asset.getCode(), {
-      remarkPlugins: [extractExamples]
+      remarkPlugins: [extractExamples, highlight]
     });
 
-    let exampleBundle = exampleCode.length === 0 
-      ?  '' 
+    let exampleBundle = exampleCode.length === 0
+      ?  ''
       : `import React from 'react';
 import ReactDOM from 'react-dom';
 import {Provider} from '@react-spectrum/provider';

diff --git a/packages/dev/parcel-transformer-mdx-docs/package.json b/packages/dev/parcel-transformer-mdx-docs/package.json
@@ -10,6 +10,7 @@
     "@parcel/plugin": "nightly",
     "@mdx-js/mdx": "^1.5.5",
     "@mdx-js/react": "^1.5.5",
-    "unist-util-flatmap": "^1.0.0"
+    "unist-util-flatmap": "^1.0.0",
+    "remark-highlight.js": "^5.2.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -6468,7 +6468,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -9100,7 +9100,7 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.0"
 
-fault@^1.0.2:
+fault@^1.0.0, fault@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
   integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
@@ -10561,6 +10561,11 @@ highlight.js@~9.12.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
   integrity sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=
 
+highlight.js@~9.16.0:
+  version "9.16.2"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.16.2.tgz#68368d039ffe1c6211bcc07e483daf95de3e403e"
+  integrity sha512-feMUrVLZvjy0oC7FVJQcSQRqbBq9kwqnYE4+Kj9ZjbHh3g+BisiPgF49NyQbVLNdrL/qqZr3Ca9yOKwgn2i/tw==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -13116,6 +13121,14 @@ lowercase-keys@^1.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
   integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
 
+lowlight@^1.2.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.13.1.tgz#c4f0e03906ebd23fedf2d258f6ab2f6324cf90eb"
+  integrity sha512-kQ71/T6RksEVz9AlPq07/2m+SU/1kGvt9k39UtvHX760u4SaWakaYH7hYgH5n6sTsCWk4MVYzUzLU59aN5CSmQ==
+  dependencies:
+    fault "^1.0.0"
+    highlight.js "~9.16.0"
+
 lowlight@~1.9.0, lowlight@~1.9.1:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.9.2.tgz#0b9127e3cec2c3021b7795dd81005c709a42fdd1"
@@ -17162,6 +17175,14 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remark-highlight.js@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/remark-highlight.js/-/remark-highlight.js-5.2.0.tgz#6d8d22085e0c76573744b7e3706fc232269f5b02"
+  integrity sha512-5tCr1CfdXDYzR8HCAnohlr1rK8DjUTFxEZdr+QEul5o13+EOEt5RrO8U6Znf8Faj5rVLcMJtxLPq6hHrZFo33A==
+  dependencies:
+    lowlight "^1.2.0"
+    unist-util-visit "^1.0.0"
+
 remark-mdx@^1.5.5:
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.5.5.tgz#7def5f778c8454b6ef7747ecb2f01376b994b884"