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
@@ -250,9 +250,10 @@ let Styleguide = React.createClass({
Design Attribute Guide
-
-
-
+
+
+
+
{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')}
-
-
-
+
+
+
+