Variables page

.gitignore

@@ -1,14 +1,15 @@
 *.log
 *.tgz
 .DS_Store
-.changelog
+.cache/
+.changelog/
 .next/
 .sass-cache
-.stylelintcache
 .storybuild/
+.stylelintcache
 _site
 dist/
+docs/dist
 node_modules/
-searchIndex.js
-.cache/
 public/
+searchIndex.js

.nowignore

@@ -0,0 +1,5 @@
+.*.sw?
+.changelog/
+dist/
+docs/dist
+docs/public/

docs/.eslintrc.json

@@ -13,5 +13,8 @@
     "react": {
       "version": "detect"
     }
+  },
+  "globals": {
+    "__DEV__": "readonly"
   }
 }

docs/content/support/variables.mdx

@@ -0,0 +1,16 @@
+---
+title: Variables
+path: support/variables
+status: Experimental
+bundle: alerts
+---
+
+import {Variables, DeprecationIcon} from '../../src/variables'
+
+<Variables>
+
+The tables below list all of the global SCSS variables defined in [the `support/variables` directory](https://github.com/primer/css/tree/master/src/support/variables).
+
+Variables with a <DeprecationIcon /> are planned for [deprecation](../tools/deprecations) in a future version of `@primer/css`, and should be avoided.
+
+</Variables>

docs/gatsby-node.js

@@ -0,0 +1,12 @@
+exports.onCreateWebpackConfig = ({actions, stage, plugins}) => {
+  actions.setWebpackConfig({
+    node: {
+      fs: 'empty'
+    },
+    plugins: [
+      plugins.define({
+        __DEV__: stage === 'develop' || stage === 'develop-html'
+      })
+    ]
+  })
+}

docs/package.json

@@ -1,18 +1,16 @@
 {
-  "name": "docs",
   "private": true,
-  "version": "1.0.0",
-  "license": "MIT",
+  "name": "docs",
+  "repository": "primer/css",
   "scripts": {
     "clean": "gatsby clean",
-    "develop": "gatsby develop -H 0.0.0.0",
-    "build": "gatsby build --prefix-paths",
-    "now-build": "npm run build"
+    "develop": "ln -sf ../dist . && gatsby develop -H 0.0.0.0",
+    "build-content": "gatsby build --prefix-paths",
+    "build": "./script/now-build.sh"
   },
   "dependencies": {
     "@loadable/component": "^5.10.2",
     "@primer/components": "^13.2.0",
-    "@primer/css": "^12.4.1",
     "@primer/gatsby-theme-doctocat": "^0.15.0",
     "@primer/octicons": "^9.1.1",
     "@primer/octicons-react": "^9.1.1",
@@ -36,5 +34,7 @@
     "styled-components": "^4.3.2",
     "title-case": "^2.1.1"
   },
-  "repository": "primer/css"
+  "engines": {
+    "node": "12.x"
+  }
 }

docs/script/now-build.sh

@@ -0,0 +1,12 @@
+#!/bin/bash -e
+
+# Build the base project so we can pull out the JSON data
+cd ..
+npm ci
+npm run dist
+cp -rf dist docs
+
+# Now build the docs site using that data
+cd docs
+npm ci
+CI=true npm run build-content

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -16,6 +16,8 @@
       url: /support/typography
     - title: Marketing support
       url: /support/marketing-variables
+    - title: Variables
+      url: /support/variables
 - title: Utilities
   url: /utilities
   children: