Skip to content

Commit

Permalink
docs: update install docs
Browse files Browse the repository at this point in the history
  • Loading branch information
blackfalcon committed Aug 5, 2019
1 parent bedffa0 commit 2ca71e0
Showing 1 changed file with 45 additions and 42 deletions.
87 changes: 45 additions & 42 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,53 @@ To install in your project, see instructions from [npmjs.org](https://www.npmjs.
npm i @alaskaairux/orion-design-tokens
```

## Install pre-processed resources

Located in the [npm](https://www.npmjs.com/package/@alaskaairux/orion-design-tokens) version of the Orion Design Tokens is a `./tokens` directory.

```
└── tokens
├── TokenProperties.css
├── _TokenProperties.scss
├── _TokenVariables.scss
└── TokenColorVariables.js
```

| file | type | syntax |
|---|---|---|
| TokenProperties.css | CSS Custom Properties | CSS |
| _TokenProperties.scss | CSS Custom Properties | SCSS |
| _TokenVariables.scss | Sass variables | SCSS |
| TokenVariables.js | data | JS |

**To install in Sass file:**

```
@import "~@alaskaairux/orion-design-tokens/dist/tokens/TokenVariables";
or
@import "~@alaskaairux/orion-design-tokens/dist/tokens/TokenProperties";
```

**To install CSS file:**

With React or similar framework, the CSS file can be imported directly from the npm:

```
import "@alaskaairux/orion-design-tokens/tokens/dist/TokenProperties.css";
```

For other frameworks, it's suggested that the CSS file be copied from the npm into the scope of the project with a build scenario.

## Build Orion Design Tokens pipeline

Install dependency

```
$ npm i style-dictionary
```

The example pipeline contains all the steps you should consider when building your integrated Orion Design Tokens pipeline.

The example pipeline currently supports Sass and CSS examples. Native mobile platforms are supported, but not yet documented in this project.
Expand Down Expand Up @@ -213,48 +258,6 @@ For processing of `.json` files to a usable Sass/CSS resources, the Orion Design

For more information, see Style Dictionary's [documentation](https://amzn.github.io/style-dictionary/#/).


Dependency is installed with this package

## Install pre-processed resources

Located in the [npm](https://www.npmjs.com/package/@alaskaairux/orion-design-tokens) version of the Orion Design Tokens is a `./tokens` directory.

```
└── tokens
├── TokenProperties.css
├── _TokenProperties.scss
├── _TokenVariables.scss
└── TokenColorVariables.js
```

| file | type | syntax |
|---|---|---|
| TokenProperties.css | CSS Custom Properties | CSS |
| _TokenProperties.scss | CSS Custom Properties | SCSS |
| _TokenVariables.scss | Sass variables | SCSS |
| TokenVariables.js | data | JS |

**To install in Sass file:**

```
@import "~@alaskaairux/orion-design-tokens/tokens/dist/TokenVariables";
or
@import "~@alaskaairux/orion-design-tokens/tokens/dist/TokenProperties";
```

**To install CSS file:**

With React or similar framework, the CSS file can be imported directly from the npm:

```
import "@alaskaairux/orion-design-tokens/tokens/dist/TokenProperties.css";
```

For other frameworks, it's suggested that the CSS file be copied from the npm into the scope of the project with a build scenario.

## Sass or CSS Custom Properties?

Style Dictionary is able to output variable files in either Sass or CSS Custom Properties (variables) format. The example pipeline and the `style.scss` file has references to both Sass and CSS variables.
Expand Down

0 comments on commit 2ca71e0

Please sign in to comment.