Add support for multiple color modes

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@1.4.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "linked": [],
+  "access": "public",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/pink-clocks-notice.md

@@ -0,0 +1,5 @@
+---
+"@primer/primitives": major
+---
+
+Add support for color modes

.github/workflows/publish.yml

@@ -0,0 +1,40 @@
+name: Primer Primitives
+on: [push]
+jobs:
+  ci:
+    name: CI
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@master
+
+      - name: Set up Node.js 10.x
+        uses: actions/setup-node@master
+        with:
+          node-version: 10
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Create .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+
+      - name: Release snapshot
+        run: |
+          yarn changeset version --snapshot
+          yarn changeset publish --tag canary
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Find version
+        run: |
+          name=$(jq -r .name package.json)
+          version=$(jq -r .version package.json)
+          npx action-status --context="$name" --state=success --description=$version --url "https://unpkg.com/$name@$version/"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -2,5 +2,6 @@
 .sass-cache
 node_modules
 *.log
-*.js
-*.d.ts
+/dist/
+/primitives/modes/
+/package-lock.json

README.md

@@ -4,65 +4,19 @@ This repo contains values for color, spacing, and typography primitives for use
 
 ## Install
 
-This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `@primer/primitives` with this command.
+This repository is distributed on [npm][npm]. After [installing npm][install-npm], you can install `@primer/primitives` with this command.
 
 ```sh
 $ npm install --save @primer/primitives
 ```
 
 ## Usage
 
-JSON is a highly interoperable format that can be used in many types of projects. You could write scripts to generate CSS, use with plugins for design tools, or import into a theme file for use with CSS-in-JS projects.
+Primitive data is served in several formats from the `dist/` folder:
 
-### Example
-
-The Primer Primitives are exported as keys on the top-level export. `colors`, `spacing`, and `typography` are available:
-
-```js
-import { colors, spacing, typography } from '@primer/primitives'
-```
-
-In addition, Primer Primitives exports a `theme`, which is a great way of sharing system styles and works with popular CSS-in-JS libraries such as  [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/).
-
-Here's an example using `styled-components`.
-
-```js
-import React from 'react'
-import styled, { ThemeProvider } from 'styled-components'
-import { theme } from '@primer/primitives'
-
-const Alert = styled.div`
-  color: ${props => props.theme.colors.green[9]};
-  background-color: ${props => props.theme.colors.green[2]};
-`
-
-const App = props => (
-  <ThemeProvider theme={theme}>
-    <Alert />
-  </ThemeProvider>
-)
-
-```
-
-When used with libraries like [styled-system](https://jxnblk.com/styled-system/), you can make Primer Primitives available to style functions. In this example, we've imported the color function to the component's styles argument. The color values are from the color JSON object in Primer Primitives.
-
-```js
-import React from 'react'
-import styled, { ThemeProvider } from 'styled-components'
-import { theme } from '@primer/primitives'
-import { color } from 'styled-system'
-
-const Alert = styled.div`
-  ${color}
-`
-
-const App = props => (
-  <ThemeProvider theme={theme}>
-    <Alert color='green.0' bg='green.2' />
-  </ThemeProvider>
-)
-
-```
+* `dist/scss` contains [SCSS][scss] files that define CSS variables to be imported into other SCSS files
+* `dist/json` contains JSON files for each set of primitives
+* `dist/js` contains CommonJS-style JavaScript modules for each set of primitives, as well as an index file that loads all of the primitives for all primitive types; you can access this via `require('@primer/primitives')`. The JavaScript modules also include TypeScript typings files for use in TypeScript projects.
 
 ## License
 
@@ -71,3 +25,4 @@ const App = props => (
 [primer]: https://github.com/primer/primer
 [npm]: https://www.npmjs.com/
 [install-npm]: https://docs.npmjs.com/getting-started/installing-node
+[scss]: https://sass-lang.com/