Skip to content
This repository has been archived by the owner on Apr 13, 2022. It is now read-only.

Commit

Permalink
Remove reliance on the Invision DSM import script
Browse files Browse the repository at this point in the history
  • Loading branch information
kaelig committed Jun 14, 2019
1 parent 5e84996 commit 37374fc
Show file tree
Hide file tree
Showing 8 changed files with 4 additions and 322 deletions.
54 changes: 0 additions & 54 deletions .github/CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`:
Expand All @@ -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🎨
32 changes: 0 additions & 32 deletions .github/ISSUE_TEMPLATE/update-colors.md

This file was deleted.

1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
116 changes: 0 additions & 116 deletions data/color-metadata.yml

This file was deleted.

6 changes: 0 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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:*:*",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
88 changes: 0 additions & 88 deletions scripts/get-tokens-from-invision-dsm.js

This file was deleted.

Loading

0 comments on commit 37374fc

Please sign in to comment.