[Color system] Add color factory and build modern tokens (#105)

* Add color factory and build modern color tokens

Co-authored-by: Dan Rosenthal <dan.rosenthal@shopify.com>
Co-authored-by: Ben Scott <227292+BPScott@users.noreply.github.com>
Co-authored-by: Kyle Durand <kyle.durand@shopify.com>
Co-authored-by: Sara Hill <sara.hill@shopify.com>
Co-Authored-By: Kaelig Deloumeau-Prigent <kaelig@users.noreply.github.com>

.circleci/config.yml

@@ -18,6 +18,7 @@ jobs:
           key: v2-npm-deps-{{ arch }}-{{ checksum "yarn.lock" }}
           paths:
             - node_modules
+      - run: yarn run type-check
       - run: yarn run build-ci
       - run: yarn run test
       - run: yarn run lint

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+/dist
+/dist-modern
+/tmp

.gitignore

@@ -15,3 +15,5 @@ node_modules
 
 # sewing-kit temporary folder
 tmp
+
+dist-modern

.npmignore

@@ -1,8 +1,8 @@
 **/*
 !dist/**/*
+!dist-modern/**/*
 !index.js
 !LICENSE.md
 !README.md
 !package.json
-!yarn.lock
 dist/colors.ase.json

.prettierignore

@@ -1 +1,5 @@
+node_modules
 package.json
+/.dev
+/dist-modern
+/tmp

.vscode/settings.json

@@ -5,5 +5,18 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
+  },
+  "files.exclude": {
+    "**/.DS_Store": true,
+    "**/.git": true,
+    "**/node_modules": true,
+    ".{bundle,dev,shadowenv.d}": true,
+    "{tmp,dist-modern}/": true
+  },
+  "search.exclude": {
+    "**/.DS_Store": true,
+    "**/.git": true,
+    "**/node_modules": true,
+    "{tmp,dist-modern}/": true
   }
 }

CHANGELOG.md

@@ -5,7 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## [Unreleased] -->
+## [Unreleased]
+
+- Added color factory and built modern tokens ([#105](https://github.com/Shopify/polaris-tokens/pull/105))
+  - Added surface disabled variant and updated other variant configs ([#101](https://github.com/Shopify/polaris-tokens/pull/101))
+  - Added TypeScript build for modern tokens, and shifted directory structures to differentiate between legacy and modern tokens ([#97](https://github.com/Shopify/polaris-tokens/pull/97))
+  - Updated variant names and descriptions ([#96](https://github.com/Shopify/polaris-tokens/pull/96))
+  - Added decorative icon variants ([#94](https://github.com/Shopify/polaris-tokens/pull/94))
+  - Built changes from previous release, and added textOnInteractive variant ([#93](https://github.com/Shopify/polaris-tokens/pull/93))
+  - Fixed an issue where legacy themes caused the color factory to throw ([#92](https://github.com/Shopify/polaris-tokens/pull/92))
+  - Updated color variants for consistency with changes in Polaris React ([#91](https://github.com/Shopify/polaris-tokens/pull/91))
+  - Marked the config as optional and the colors as partial ([dd3d8fc](https://github.com/Shopify/polaris-tokens/commit/dd3d8fc05572fb03e764a85a0519bbd3dde11855))
+  - Added the Color Factory. Long live the Color Factory! ([#89](https://github.com/Shopify/polaris-tokens/pull/89))
 
 ## [2.7.0] - 2019-10-28
 

formats/tokens.js

@@ -0,0 +1,28 @@
+const path = require('path');
+const fs = require('fs');
+
+const {colorFactory} = require('../dist-modern/color-factory.js');
+const {tokensToJson} = require('../dist-modern/utils');
+
+function tokenify(scheme) {
+  return (result) => {
+    const configFile = path.basename(result.toJS().meta.file, '.yml');
+    const config = `${__dirname}/../dist-modern/configs/${configFile}`;
+    let configArg;
+
+    if (fs.existsSync(`${config}.js`)) {
+      configArg = require(`../dist-modern/configs/${configFile}`).config;
+    }
+
+    const theme = tokensToJson(result);
+    const palette = colorFactory(theme, scheme, configArg);
+
+    const yml = Object.entries(palette).reduce((accumulator, [key, value]) => {
+      return `${accumulator}  - name: ${key}\n    value: '${value}'\n`;
+    }, '');
+
+    return `props:\n${yml}global:\n  type: color\n  category: background-color\n`;
+  };
+}
+
+module.exports = {tokenify};