Merge pull request #48 from salesforce-ux/feature/spring-cleaning-and…

…-upgrade

Spring cleaning / Rename "Design Properties" as "Design Tokens"

.editorconfig

@@ -0,0 +1,9 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+dist
+*.log

.travis.yml

@@ -4,4 +4,4 @@ node_js:
 install:
 - npm install
 script:
-- npm test
+- npm test

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing Code
 
-External contributors will be required to sign a Contributor's License Agreement. You can find this file [here](https://github.com/salesforce-ux/design-system/blob/winter-16/Salesforce_CLA.pdf). Please sign, scan, and send to [osscore@salesforce.com](mailto:osscore@salesforce.com). We look forward to collaborating with you!
+External contributors will be required to sign a Contributor's License Agreement. You can find this file [here](https://github.com/salesforce-ux/design-system/blob/master/Salesforce_CLA.pdf). Please sign, scan, and send to [osscore@salesforce.com](mailto:osscore@salesforce.com). We look forward to collaborating with you!
 
 1. Create a new issue before starting your project so that we can keep track of what you are trying to add/fix. That way, we can also offer suggestions or let you know if there is already an effort in progress.
 2. Fork off this repository.

README.md

@@ -4,7 +4,7 @@
 [![NPM version][npm-image]][npm-url]
 
 Theo is a set of [Gulp](http://gulpjs.com) plugins for
-transforming and formatting [Design Properties](#overview)
+transforming and formatting [Design Tokens](#overview)
 
 ## Example
 
@@ -18,9 +18,9 @@ gulp.src('design/props.json')
   .pipe(gulp.dest('dist'));
 ```
 
-## Design Properties <a name="overview"></a>
+## Design Tokens <a name="overview"></a>
 
-Theo consumes **Design Property** files which are a central location to store
+Theo consumes **Design Token** files which are a central location to store
 design related information such as colors, fonts, widths, animations, etc. These raw
 values can then be transformed and formatted to meet the needs of any platform.
 
@@ -35,12 +35,12 @@ iOS might like **rgba** values formatted as **.json**.
 Finally, Android might like **8 Digit Hex** values formatted as **.xml**.
 
 Instead of hard coding this information in each platform/format, Theo
-can consume the centralized **Design Properties** and output files for
+can consume the centralized **Design Tokens** and output files for
 each platform.
 
 ### Spec
 
-A *Design Properties* file is written in either
+A *Design Token* file is written in either
 `json` or `yml` and should conform to the following spec:
 
 ```json5
@@ -96,7 +96,7 @@ A *Design Properties* file is written in either
   },
 
   // Optional
-  // Array of design property files to be imported
+  // Array of design token files to be imported
   // "aliases" will be imported as well
   // "aliases" will already be resolved
   // "global" will already be merged into into each prop
@@ -114,13 +114,13 @@ Theo is divided into two primary plugins:
 
 This plugin is responsible for transforming raw values into platform specific values.
 
-For example, the Design Properties might specify a color value as an
+For example, the Design Tokens might specify a color value as an
 rgba (`rgba(255, 0, 0, 1)`), but an Android app
 might prefer to consume colors as an 8 digit hex (`#ffff0000`)
 
 ### [format](#plugins.format)
 
-This plugin is responsible for taking transformed properties and outputting them
+This plugin is responsible for taking transformed tokens and outputting them
 into a new file format.
 
 An Android app might prefer to consume the final values as XML:
@@ -134,9 +134,9 @@ An Android app might prefer to consume the final values as XML:
 
 ## API
 
-####`theo.plugins.transform(type, [options])` <a name="plugins.transform"></a>
+#### `theo.plugins.transform(type, [options])` <a name="plugins.transform"></a>
 
-Transform the values for each *Design Property* file according to
+Transform the values for each *Design Token* file according to
 the specified type.
 
 A transform is list of [valueTransforms](#registerValueTransform) that should be applied
@@ -146,7 +146,7 @@ to each property.
 The name of the registered transform
 
 **@param {object} [options]**  
-Addtional options  
+Additional options
 
 **@param {boolean} [options.includeMeta]**  
 Don't remove ".meta" key from a prop 
@@ -160,7 +160,7 @@ gulp.src('./design/props.json')
 
 ***
 
-####`theo.registerTransform(type, valueTransforms)`
+#### `theo.registerTransform(type, valueTransforms)`
 
 Register a new transform. Existing transforms with the same name
 will be overwritten.
@@ -185,7 +185,7 @@ Below is a list of pre-defined transforms and the corresponding
 [valueTransforms](registerValueTransform) that will be applied.
 
 *Note*: Generally speaking, the pre-defined transforms assume the original
-*Design Properties* are formatted for the web.
+*Design Tokens* are formatted for the web.
 
 **raw**:  
 No valueTransforms will be applied
@@ -204,7 +204,7 @@ No valueTransforms will be applied
 
 ***
 
-####`theo.registerValueTransform(name, matcher, transformer)` <a name="registerValueTransform"></a>
+#### `theo.registerValueTransform(name, matcher, transformer)` <a name="registerValueTransform"></a>
 
 Register a new valueTransform. Existing valueTransforms with the same name
 will be overwritten.
@@ -245,7 +245,7 @@ Parse the value as a color and return an 6 digit hex string
 Parse the value as a color and return an 8 digit hex string
 
 **percentage/float**  
-Parse a string percentage value and return a float represention
+Parse a string percentage value and return a float representation
 
 **relative/pixel**  
 Parse a relative size value (em/rem) and return a pixel representation.
@@ -258,9 +258,9 @@ Same as *relative/pixel*, but removes the `px` extension
 
 ***
 
-####`theo.plugins.format(type, [options])`  <a name="plugins.format"></a>
+#### `theo.plugins.format(type, [options])` <a name="plugins.format"></a>
 
-Format the output for each *Design Property* file according to
+Format the output for each *Design Token* file according to
 the specified type.
 
 *Note*: This plugin will almost always run after a `transform` call.
@@ -304,7 +304,7 @@ gulp.src('design/props.json')
 
 ***
 
-####`theo.registerFormat(name, formatter)`
+#### `theo.registerFormat(name, formatter)`
 
 Register a new format. Existing formats with the same name
 will be overwritten.
@@ -314,7 +314,7 @@ The name of the format
 
 **@param {function} formatter**  
 An function that should return a string representation
-of the reformatted *Design Properties*.
+of the reformatted *Design Tokens*.
 
 The formatter will be called with two arguments:
 
@@ -340,7 +340,7 @@ theo.registerFormat('scss', (json, options) => {
 Here is the layout of the `json` argument
 ```json5
 {
-  // An object containing the transformed properties
+  // An object containing the transformed tokens
   "props": {},
   // An array of the keys for easy iteration
   "propKeys": []
@@ -400,7 +400,7 @@ Here is the layout of the `json` argument
 
 ###### scss
 
-```sass
+```scss
 $prop-name: PROP_VALUE;
 ```
 
@@ -466,14 +466,14 @@ define(function() {
 });
 ```
 
-###### styleguide
+###### Styleguide
 
-See [salesforce-ux.github.io/design-properties]()
+See <https://salesforce-ux.github.io/design-properties>.
 
 
 ***
 
-####`theo.plugins.getResult([callback])`
+#### `theo.plugins.getResult([callback])`
 
 Get the result of a transform/format
 
@@ -483,7 +483,7 @@ The function to call for each result in the stream
 #### Example:
 
 ```js
-// Get the transformed Design Properties
+// Get the transformed Design Tokens
 gulp.src('design/props.json')
   .pipe(theo.plugins.transform('web'))
   .pipe(theo.plugins.getResult(result => {
@@ -492,7 +492,7 @@ gulp.src('design/props.json')
 ```
 
 ```js
-// Get the formatted Design Properties
+// Get the formatted Design Tokens
 gulp.src('design/props.json')
   .pipe(theo.plugins.transform('web'))
   .pipe(theo.plugins.format('android.xml'))

package.json

@@ -1,11 +1,13 @@
 {
   "name": "theo",
   "version": "4.2.0",
-  "description": "A set of Gulp plugins for transforming and formatting Design Properties",
+  "license": "SEE LICENSE IN README.md",
+  "description": "A set of Gulp plugins for transforming and formatting Design Tokens",
   "keywords": [
     "css",
     "design",
     "properties",
+    "tokens",
     "sass",
     "scss",
     "stylus",

src/props/formats/html.jsx

@@ -240,7 +240,7 @@ let Styleguide = React.createClass({
         <head>
           <meta charSet="utf-8" />
           <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-          <title>Design Property Guide</title>
+          <title>Design Tokens</title>
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <Style />
         </head>
@@ -250,9 +250,10 @@ let Styleguide = React.createClass({
               <h1>Design Attribute Guide</h1>
             </div>
           </header>
-            <div className="container">
-              <main role="main">
-                <table>
+          <div className="container">
+            <main role="main">
+              <table>
+                <tbody>
                   {this.renderSection('text-color', 'Text Colors')}
                   {this.renderSection('background-color', 'Background Colors')}
                   {this.renderSection('gradient', 'Gradients')}
@@ -269,9 +270,10 @@ let Styleguide = React.createClass({
                   {this.renderSection('radius', 'Radius')}
                   {this.renderSection('time', 'Time')}
                   {this.renderSection('media-query', 'Media Queries')}
-                </table>
-              </main>
-            </div>
+                </tbody>
+              </table>
+            </main>
+          </div>
         </body>
       </html>
     )
@@ -280,7 +282,7 @@ let Styleguide = React.createClass({
 
 module.exports = function(json) {
   return `
-    <!doctype html>
+    <!DOCTYPE html>
     ${React.renderToStaticMarkup(<Styleguide json={json} />)}
   `;
-};
+};

src/props/index.js

@@ -235,7 +235,7 @@ registerFormat('list.scss', (json, options) => {
 
 registerFormat('map.scss', (json, options) => {
   options = _.defaults({}, options, {
-    nameSuffix: '-map' 
+    nameSuffix: '-map'
   });
   let items = _.map(json.props, prop => {
     let name = kebabCase(prop.name);
@@ -261,7 +261,7 @@ registerFormat('map.scss', (json, options) => {
 
 registerFormat('map.variables.scss', (json, options) => {
   options = _.defaults({}, options, {
-    nameSuffix: '-map-variables' 
+    nameSuffix: '-map-variables'
   });
   _.transform(json.props, (result, value, name, props) => {
     props[name].value = `$${kebabCase(name)}`;
@@ -429,7 +429,7 @@ module.exports = {
      *
      * @param {function} [callback]
      * @return {stream}
-     */    
+     */
     getResult(callback) {
       return through.obj((file, enc, next) => {
         if (typeof callback === 'function' && file.isBuffer()) {
@@ -516,7 +516,7 @@ module.exports = {
             let json = util.parsePropsFile(file);
             propSets.push(json);
           } catch(e) {
-            let err = TheoError('diff() encountered an invalid Design Properties file', file.path);
+            let err = TheoError('diff() encountered an invalid Design Token file', file.path);
             return next(err);
           }
         }

src/props/prop-set.js

@@ -18,7 +18,7 @@ let util        = require('./util');
 let TheoError   = require('./util/error');
 
 class PropSet {
-  
+
   constructor(file, valueTransforms, options={}) {
     if (typeof file.isBuffer !== 'function' || typeof file.isBuffer === 'undefined') {
       throw TheoError('transform() must use vinyl files');
@@ -51,7 +51,7 @@ class PropSet {
       def = _.merge(def, json);
     }
     catch (e) {
-      throw TheoError(`transform() encountered an invalid Design Properties file: ${this.file.path}`);
+      throw TheoError(`transform() encountered an invalid Design Token file: ${this.file.path}`);
     }
     // Raw
     if (options.includeRawValue === true) {
@@ -111,10 +111,10 @@ class PropSet {
 
   _validate(def) {
     if (_.isArray(def.props)) {
-      throw TheoError(`Design Properties "props" key must be an object`);
+      throw TheoError(`Design Token "props" key must be an object`);
     }
     if (!_.has(def, 'props') || !_.isObject(def.props)) {
-      //console.warn('Design Properties contained no "props" object')
+      //console.warn('Design Token contained no "props" object')
       def.props = {};
     }
     // Make sure properties have all required keys
@@ -173,7 +173,7 @@ class PropSet {
       // Extract the meta data
       let meta = prop['.meta'];
       if (this.options.includeMeta !== true) {
-        delete prop['.meta'];        
+        delete prop['.meta'];
       }
       // Transform the value
       this._transformValue(prop, meta);