@cuidas/token v4.6.5

@cuidas/token

This project is responsible to keep all layout specifications, and should export data from all platforms to resolve layouts.

We use a tool called style-dictionary. That help to organize the data in json files.

Development

When you clone this repo, that is managed by lerna. All you need to do is install the dependencies and run dev command:

# to install all dependencies
npm run bootstrap

# to run in dev mode
npm run dev

The commands above, will build the tokens that will be available to other modules, that is usings tokens module as dependencies.

How it works

Basically, all tokens are set on properties folder. The build will look for .json files, read then and transform in formats that your system cam read. You can read more in styles dictionary build process page.

This example code is bare-bones to show you what this framework can do. After install the dependencies, if you run the build command:

npm run build

You should see something like this output:

Reading config file from ./config.json
Building all platforms

es6
✔︎ build/web/index.js

Pat yourself on the back, you just built your first style dictionary! Moving on, take a look at what we have built. This should have created a build directory and it should look like this:

├── web/
│   ├── index.js

If you open config.json you will see there is 1 platform defined: es6. This platform have a transformGroup, buildPath, and files. The buildPath and files of the platform should match up to the files what were built. The files built should look like these:

web

module.exports = {
  "color": {
    "outerSpace": "#444745",
    "spanishGrey": "#949999",
    ...
  },
  "size": {
    "separators": {
      "xxSmall": "8px",
      "xSmall": "11px",
      ...
    }
  }
}

Pretty nifty! This shows a few things happening: 1. The build system does a deep merge of all the property JSON files defined in the source attribute of config.json. This allows you to split up the property JSON files however you want. There are 2 JSON files with color as the top level key, but they get merged properly. 1. The build system resolves references to other style properties. {size.font.medium.value} gets resolved properly 1. The build system handles references to property values in other files as well as you can see in properties/color/font.json

Now lets make a change and see how that affects things. Open up properties/color/base.json and change "#111111" to "#000000". After you make that change, save the file and re-run the build command npm run build. Open up the build files and take a look.

Huzzah!

Now go forth and create! Take a look at all the built-in transforms and formats.