Remove reliance on the Invision DSM import scripts

.github/CONTRIBUTING.md

@@ -134,60 +134,8 @@ Design tokens source files are in the `./tokens` directory, in YAML format.
 
 Adding, removing, and updating design tokens should be discussed in the issues of this project before contributing to code changes.
 
-Note: `./tokens/colors.yml` should not be manually edited, as it is automatically generated by this project.
-Colors are managed in [Invision Design System Manager](https://www.invisionapp.com/blog/announcing-invision-design-system-manager/) (see below).
-
 ---
 
-## Updating color tokens
-
-Color names, values and descriptions are managed in [Invision Design System Manager](https://www.invisionapp.com/blog/announcing-invision-design-system-manager/) at this URL:
-<https://shopify.invisionapp.com/dsm/shopify/design-tokens>.
-
-### Adding colors
-
-1.  Install the Craft Plugin in [Sketch](https://www.sketchapp.com/) and log in with your Shopify account.
-2.  Once Craft for Sketch is set up, open Design System Manager, and follow these steps:
-
-    ![ ](https://user-images.githubusercontent.com/85783/38760431-0e55954e-3f30-11e8-935c-7ba35b0edc44.png)
-
-    ![ ](https://user-images.githubusercontent.com/85783/38760487-60970130-3f30-11e8-8a45-e02b7c8c4b46.png)
-
-3.  Finally, **[open a new issue][issue-template-color-updated]**
-
-### Changing a color’s name
-
-Color names are editable in <https://shopify.invisionapp.com/dsm/shopify/design-tokens> or via the Sketch Craft plugin, under the Design System Manager tab.
-
-Important considerations before changing color names: this type of update is a breaking change,
-and products consuming design tokens will have to update all occurrences of the old name in their codebases.
-
-1.  Change the name of the color
-2.  **[Open a new issue][issue-template-color-updated]**
-
-### Editing a color’s value
-
-At the time these lines were written, Invision Design System Manager doesn’t support editing colors.
-
-Here’s a workaround:
-
-1.  Delete said color
-2.  Re-add the color (with the same name), this time specifying the new value
-    (following the steps described above in “Adding colors”)
-3.  **[Open a new issue][issue-template-color-updated]**
-
-When updating a color, please also remember to update its `filter` metadata. Filter values can be generated using [this CodePen](https://codepen.io/kaelig/full/jeObGP/) and are stored in [`/data/color-metadata.yml`](https://github.com/Shopify/polaris-tokens/blob/master/data/color-metadata.yml).
-
-### Developers
-
-This script fetches color data from the DSM API and dumps it in [`tokens/colors.yml`](https://github.com/Shopify/polaris-tokens/blob/master/tokens/colors.yml) under a format appropriate for consumption by [Theo](https://github.com/salesforce-ux/theo):
-
-```
-yarn get-tokens-from-invision-dsm
-yarn dist
-yarn test -u
-```
-
 ## Releasing
 
 When releasing a new version, follow these steps on `master`:
@@ -196,5 +144,3 @@ When releasing a new version, follow these steps on `master`:
 2.  Run `yarn version` and assign a new version
 3.  Run `git push --follow-tags`
 4.  [Deploy on Shipit](https://shipit.shopify.io/shopify/polaris-tokens/production)
-
-[issue-template-color-updated]: https://github.com/Shopify/polaris-tokens/issues/new?template=update-colors.md&title=Update%20colors%20🎨

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [Unreleased]
 
 - Updated filter for the Blue color ([#64](https://github.com/Shopify/polaris-tokens/pull/64))
+- Removed reliance on the Invision DSM import script (colors are now directly managed in `tokens/colors.yml`) ([#66](https://github.com/Shopify/polaris-tokens/pull/66))
 
 ## [2.6.0] - 2019-06-06
 

README.md

@@ -125,7 +125,7 @@ polaris_colors['color-blue-lighter'] # "rgb(235, 245, 250)"
 
 ### CSS Filters
 
-Color tokens include a [CSS Filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) (`filter`) value as part of [their metadata](https://github.com/Shopify/polaris-tokens/blob/master/data/color-metadata.yml). When this filter is applied to an element, it will change that element’s color to _approximate_ the target token color.
+Color tokens include a [CSS Filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) (`filter`) value as part of their metadata. When this filter is applied to an element, it will change that element’s color to _approximate_ the target token color.
 
 ```
 <div>

formats/sketchpalette.js

@@ -12,16 +12,19 @@ function convertToSketchPaletteColor(input) {
   };
 }
 
+function friendlyName(propName) {
+  return propName
+    .replace(/^color-/, '')
+    .replace(/-/g, ' ')
+    .replace(/(?<=^| )[a-z]/g, (letter) => letter.toUpperCase());
+}
+
 const convertColorArray = (result) => {
-  const {props} = result.toJS();
-  return (
-    props
-      // Convert each color token into a Sketch-friendly color format
-      .map((prop) => ({
-        name: prop.meta.friendlyName,
-        ...convertToSketchPaletteColor(prop.value),
-      }))
-  );
+  // Convert each color token into a Sketch-friendly color format
+  return result.toJS().props.map((prop) => ({
+    name: friendlyName(prop.name),
+    ...convertToSketchPaletteColor(prop.value),
+  }));
 };
 
 module.exports = (result) =>

package.json

@@ -8,7 +8,6 @@
     "test": "sewing-kit test",
     "test-watch": "nodemon --exec 'npm-run-all dist test' --watch ./tokens --watch ./formats --watch ./gulpfile.js --watch ./scripts",
     "clean": "rimraf ./dist",
-    "get-tokens-from-invision-dsm": "node ./scripts/get-tokens-from-invision-dsm.js",
     "predist": "yarn clean",
     "dist": "npm-run-all dist:**",
     "dist-ci": "npm-run-all dist:* dist:*:*",
@@ -58,9 +57,6 @@
     "ase-util": "^1.0.1",
     "ase-utils": "^0.1.1",
     "browser-sync": "^2.26.3",
-    "dashify": "^2.0.0",
-    "fs-extra": "^7.0.1",
-    "gray-matter": "^4.0.1",
     "gulp": "^3.9.1",
     "gulp-load-plugins": "^1.5.0",
     "gulp-plumber": "^1.2.1",
@@ -71,10 +67,8 @@
     "gulp-theo": "^2.0.0",
     "http-server": "^0.11.1",
     "immutable": "^3.8.2",
-    "js-yaml": "^3.12.1",
     "lodash": "^4.17.11",
     "ms": "^2.1.1",
-    "node-fetch": "^2.3.0",
     "nodemon": "^1.18.9",
     "npm-run-all": "^4.1.5",
     "renamer": "^1.1.1",