Migrate to style-dictionary (#25)

* Remove unnecessary package

* Simplify grunt tasks and split default and dev watcher

* Remove style declarations from device icons

Style tags in the sprites can mess with Vue and React since they affect state rendering

* Refactor gruntfile to match standard format

* Add POC style-dictionary structure

* Update gitignore

* [WIP] Pushing so cdieter can take a look

* SVGO is good to go

* Convert to YAML

- Add color ramps via specially formed strings (array-alikes)
- Add more structure for build-specific scripts
- Remove old mixins and less variable files
- prettify svg sprite files with indentation
- Add id to svg tag in sprite files
- Remove grunt and old packages

* Update README

* Update yarn.lock

* Move assets and properties into dictionary dir

- Add file comment to custom formats
- Move yaml import to its own module
- Fix hex with alpha outputting incorrectly in less and js

* Load YAML files easier

* Remove data-colors es module

* Simplify array values

- Remove single-value data color variables
- Refactor array formats as transforms
- Remove broken fonts config
- Separate data colors into individual files

* Remove components for now

* Sync up player icons from jwplayer source

* "Quotes"

* Clean up package.json

* Update README

* Fix vscode launch command for non-windows

* Output optimized sprites in dist

* Move dist svg icons into their own directory

.gitignore

@@ -1 +1,85 @@
-node_modules
+### Start import from github/gitignore/master/Node.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+	"recommendations": [
+		"naumovs.color-highlight",
+		"redhat.vscode-yaml",
+		"tuxtina.json2yaml",
+		"radium-v.better-less",
+		"dbaeumer.vscode-eslint"
+	]
+}

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+	// Use IntelliSense to learn about possible attributes.
+	// Hover to view descriptions of existing attributes.
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"type": "node",
+			"request": "launch",
+			"name": "Build Style Dictionary assets",
+			"program": "${workspaceFolder}\\build.js",
+			"windows": {
+				"useWSL": true
+			}
+		}
+	]
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+	"files.eol": "\n",
+	"files.insertFinalNewline": true
+}

README.md

@@ -3,58 +3,169 @@
 ![owners](https://img.shields.io/badge/owners-Design--Team-brightgreen.svg)
 ![contributors](https://img.shields.io/badge/contributors-Portal--NL-yellow.svg)
 
-> This repository contains a reference for global styles & icons used in JW Player products. Usage guidelines and code snippets for the following can be found on the [JW Design Site](https://design.jwplayer.com/docs/#/).
+> This repository contains a reference for global styles & icons used in
+> JW Player products. Usage guidelines and code snippets for the following can
+> be found on the [JW Design Site](https://design.jwplayer.com/docs/#/).
 
 ## Use Hook in Your Project
-### Styles
-Hook styles can be included in two ways:
 
-#### Option 1: Pull Less Into Build
-Import Hook in it's entirety, for example:
-```less
-@import 'jw-design-library/styles/hook';
-@import './less/your_other_styles';
+The `dist` directory contains various files you can reference in your project:
+
+* Less variable stylesheets for `@import`ing
+* JavaScript/ES6 exports
+* SVG `<symbol>` spritesheets for use with `<use>` tags
+
+To use the tagged Github releases:
+```bash
+# with yarn
+yarn add jwplayer/jw-design-library#v5.0.0
+
+# with npm
+npm install jwplayer/jw-design-library#v5.0.0
 ```
 
-Or simply reference only the files you need:
+### Use with Less
+We provide various files that contain namespaced Less variables to use in your
+project (`dist/less/`). It's recommended to use these files by reference/import
+instead of integrating them directly, to avoid using stale properties.
+
+Currently, this set includes JW Player brand-specific colors, global system
+colors, and data visualization value lists for gradients and color stops.
+
+#### Example
+In your stylesheet, you can import the color variables like this:
 ```less
-@import 'jw-design-library/styles/variables/fonts';
-@import 'jw-design-library/styles/mixins/global';
+
+@import (reference) "jw-design-library/dist/less/brand-colors.less";
+@import (reference) "jw-design-library/dist/less/data-colors.less";
+@import (reference) "jw-design-library/dist/less/system-colors.less";
+
+.my-cool-icon {
+    fill: @ds-color-brand-dahlia;
+}
+
+.example-gradient {
+    background-image: linear-gradient(to right, @ds-color-ramp-data-scale-mango-7);
+}
 ```
 
-#### Option 2: CDN-Hosted, Minified CSS
-You can also include minified CSS in the document `<head>`. Please keep in mind that this option is **plain CSS**, which will **only output** the selectors and styles for items in the `components` folder (like icons & logos). This does not come with variables and mixins.
+#### Notes on using Less variables:
+* If you're using `webpack/less-loader`, make sure to read
+  [this section](https://github.com/webpack-contrib/less-loader#imports) of the
+  README.
+* To keep things DRY, you can use
+  [variables](http://lesscss.org/features/#variables-feature-import-statements)
+  to shorten import paths.
+
+### Use with JavaScript
+Color variables are available as exports (`dist/js/`). Brand and system colors
+are individual strings that can be used with a library like
+[tinycolor](https://github.com/typectrl/tinycolor).
+
+Data colors are arrays of color values as strings intended for use with data
+visualization frameworks like D3.
+
+#### Example
+In your module, you can import any of the color variables like this:
+```js
+import { TinyColor } from '@ctrl/tinycolor';
+import { dsColorSystemRed } from 'jw-design-library/dist/js/system-colors.js';
 
+const color = new TinyColor(dsColorSystemRed);
+```
+
+### SVG Sprites
+SVG sprites are available as raw SVG files, intended to be used with "The 'New'
+Way" (https://css-tricks.com/svg-symbol-good-choice-icons/#article-header-id-1)
+to render SVG sprite icons. Here's an example:
 ```html
-<link rel="stylesheet" type="text/css" href="https://hook.jwplayer.com/core/hook.min.css">
+<style> /* clearly rendered via Less variables from the design library ;) */
+  .my-cool-icon { fill: #ec0041 }
+  .my-blue-icon { fill: #0a75e3 }
+</style>
+<!-- The *contents* of the spritesheet need to be included somewhere in the
+body, but only once - we're working with IDs here! -->
+<svg xmlns="http://www.w3.org/2000/svg" id="ds-sprites-dashboard" style="display:none">
+  <symbol viewBox="0 0 24 24" id="ds-icon-dashboard-play"><path d="M20.11 10.34l-12-8A2 2 0 0 0 5 4v16a2 2 0 0 0 3.11 1.66l12-8a2 2 0 0 0 0-3.32z"/></symbol>
+  <!-- more <symbols>... -->
+</svg>
+
+<!-- icons can be styled independently of each other -->
+<svg class="my-cool-icon"><use href="#ds-icon-dashboard-play" /></svg>
+<svg class="my-blue-icon"><use href="#ds-icon-dashboard-play" /></svg>
 ```
-View our full list of hosted styles at [hook.jwplayer.com](http://hook.jwplayer.com/).
 
-### Typography
-To use Hook fonts, simply invoke the import mixin by calling `.ds-font-imports()` in your Less.  **(We recommend doing this only once in your main stylesheet to avoid extraneous requests.)**  View usage guidelines [here](https://design.jwplayer.com/docs/#/patterns/typography).
+## Contributing
 
-### Iconography
-The icons folder contains two SVG sprites, `icons-player` and `icons-dashboard`, that can be easily referenced and customized with CSS.  View usage guidelines [here](https://design.jwplayer.com/docs/#/patterns/iconography).
+### Building
+To build this project on your machine:
 
-## Contribute to Hook
-Feature request? Feel free to open a PR and assign it to [Kim Hart](https://github.com/kimhart) or [Monica Parra](https://github.com/monibons). Follow the guidelines below to contribute:
-### Branch Namespacing
-- **Feature work in progress:** `wip.DES-100.feature-name`
-- **Feature work QA-ed and ready for release:** `release.DES-100.feature-name`
-- **Bug fixes / minor updates:** `patch.DES-101.bug-fix-description`
+```bash
+# install the dependencies
+yarn install
 
-### Running Locally
-To run this project on your machine & watch/compile any changes:
-```
-npm install
-grunt
+# Remove the `dist` folder completely
+yarn clean
+
+# Run the build script
+yarn build
 ```
 
-### Adding a New Stylesheet
-1. Add your LESS stylesheet to the `styles` folder
-2. Import it in the `hook.less` master file with the appropriate path
+### Build Script
+The file `build.js` imports various modules from `scripts/` to build the full
+style-dictionary config. Here's a really quick rundown:
+
+* `formatters/svg-sprite` runs each matched icon through SVGO, then converts the
+  SVG into a `<symbol>`. After all icons in the group are optimized, a wrapper is
+  added and the SVG file is output.
+* `transformers/content-array-to-list`: Converts property values into
+  comma-separated lists. This is used to output data colors for Less.
+  ```yaml
+  prop:
+    value:
+    - '#000000'
+    - '#CCCCCC'
+    - '#FFFFFF'
+  ```
+  The example above has this final output:
+  ```less
+  @prop: #000000, #cccccc, #ffffff;
+  ```
+* `transformers/content-list-to-js-array`: Converts property values into
+  bracketed arrays. This, combined with `content-array-to-list`, is used to
+  output data colors for JS. The example above has this final output:
+  ```js
+  export const prop = ["#000000","#cccccc","#ffffff"];
+  ```
+* `transform-groups/less-transform-group`: Overrides the built-in `less`
+  transformGroup, to add `content/arrayList` and switch to `color/css` for rgba
+  output.
+* `transform-groups/js-transform-group`: Overrides the built-in `js`
+  transformGroup, to add `content/arrayToList` and `content/listToJsArray`.
+* `utils/mock-require`: Rather than rewrite the `combineJSON` function present
+  in `style-dictionary`, we intercept the `require` call itself to render YAML
+  with `js-yaml` when necessary. This may change if `combineJSON` ever changes.
+* `utils/svgo`: Since SVGO is asynchronous by design, we use a wrapper module
+  with [sync-rpc](https://www.npmjs.com/package/sync-rpc) to treat it as if it's
+  synchronous. You may notice the dots when `icons` are being built - each dot
+  represents a sprite that has been "synchronously" optimized by SVGO.
 
-### Adding a New Icon
-1. Determine if your new icon belongs to the player or dashboard and add the SVG to the appropriate folder
-2. Grunt will auto-generate a new sprite with all icons
 
+### Dictionary
+This project is built with Amazon's fantastic
+[Style Dictionary](https://github.com/amzn/style-dictionary/) project.
+Documentation for the base project can be found
+[here](https://amzn.github.io/style-dictionary/).
+
+This repository is first and foremost a collection of key-value pairs.
+
+## Contribute to Hook
+Have a feature request? Feel free to open a PR and assign it to
+[Kim Hart](https://github.com/kimhart),
+[Monica Parra](https://github.com/monibons), or
+[John Kreitlow](https://github.com/radium-v). Follow the guidelines below to
+contribute:
+### Branch Namespacing
+- **Feature work in progress:** `wip.DES-100.feature-name`
+- **Feature work QA-ed and ready for release:** `release.DES-100.feature-name`
+- **Bug fixes / minor updates:** `patch.DES-101.bug-fix-description`