diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..ed8d3c3 --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore index 76add87..0973bc0 100755 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules -dist \ No newline at end of file +dist +*.log \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index b2d2383..b8085a4 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,4 +4,4 @@ node_js: install: - npm install script: -- npm test \ No newline at end of file +- npm test diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 987f484..c39f327 100644 --- a/CONTRIBUTING.md +++ b/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. diff --git a/README.md b/README.md index 55ee21c..bab3083 100755 --- a/README.md +++ b/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 +## Design Tokens -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])` +#### `theo.plugins.transform(type, [options])` -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)` +#### `theo.registerValueTransform(name, matcher, transformer)` 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])` +#### `theo.plugins.format(type, [options])` -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 . *** -####`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')) diff --git a/package.json b/package.json index 19f1e48..f57e6c1 100755 --- a/package.json +++ b/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", diff --git a/src/props/formats/html.jsx b/src/props/formats/html.jsx index dac6d8e..b028cd8 100644 --- a/src/props/formats/html.jsx +++ b/src/props/formats/html.jsx @@ -240,7 +240,7 @@ let Styleguide = React.createClass({ - Design Property Guide + Design Tokens