intf-style-dictionary

Design Token System for Interfolio

Description

The purpose of this project is to provide a seamless solution for our FE applications to consume the Axiom Design System.

Getting Started

If the desire is to work with the project directly, then follow the below steps:

1. Clone this repository
2. From the root level, execute yarn run build. This will hit the invision API endpoint and generate all of the styles provided in Axiom.

If the desire is to run this directly from a FE application, then follow the below steps:

1. Add the latest version of the npm packageintf-style-dictionary to your package.json
2. During install, the invision API endpoint will return the Axiom styles and place them in an Axiom folder at the root level of the application.
3. You can then reference the _variables.scss file for the style variables.

Using a config

A default config is provided which builds a _variable.scss inside ./axiom/styles. It is possible to provide a path to a config file for when the default .scss config is not enough.

1. Create a config.json file containing the Style-Dictionary compatible config. As well as the Style-Dictionary compatible config. It is possible to provide an extractPath property that sets where the axiom zip is extracted to.
2. Run the script as before with additional command line arguments. Two are provided. --config and --extractPath. If the extractPath is not provided. The config will be searched.If the config does not contain an extract path. The default 'axiom' will be used.

npx intf-style-dictionary --config "style-dictionary/config.json"

npx intf-style-dictionary --config 'style-dictionary/config.json' --extractPath 'axiom'