lyne-design-tokens v3.21.0

Lyne Design Tokens

Automatically generate cross platform Design Tokens for the Lyne Design System based json properties files and publish them as lyne-design-tokens npm package.

Installation

Install the Lyne Design Tokens with the following command:

npm install --save-dev lyne-design-tokens

What's included

lyne-design-tokens/
├── designTokens/                           # Token source files
└── dist/                                   # These files get built through the build task and get published via npm — are part of the npm package
    ├── css/
    │    ├── variables--host.css            # CSS variables with :host selector
    │    └── variables--root.css            # CSS variables with :root selector
    ├── js/
    │    ├── tokens-raw.json                # Nested .json file
    │    ├── tokens.commonjs.js             # Flat commonjs file
    │    ├── tokens.es6.js                  # Flat es6 file
    │    └── tokens.json                    # Flat .json file
    ├── less/                            
    │   └── variables.less                  # Less variables
    └── scss/                            
        ├── variables_css--placeholder.scss # CSS variables with Sass placeholder selector (%)
        └── variables.scss                  # Sass variables

Usage

Have a look at the dist folder inside node_modules: ./node_modules/lyne-design-tokens/dist/. There you will find the different variables files which you can import and use in your project.

Development

Conventional Commits

Please follow the Conventional Commits specification to make sure we can automatically determine the next release version if necessary.

Env Variables

To test and develop the workflow on your local machine, you need to setup an .env file in the root directory of the project with the following content:

TRAVIS_TOKEN=XXX

Replace XXX with the according value.

Deployment

TravisCI is building as soon as a branch gets merged into the master branch. After successful linting, the Lyne Design Tokens package will be published to npm. You can find the package on npm here.

After successful build, the job for lyne-components will be triggered.