!tests workflow

Style Dictionary Sets

This is a collection of transforms and formatters for adding support for sets to Style Dictionary.

Installation

for yarn:

``shell
yarn add style-dictionary-sets
`

for npm:

`shell
npm install style-dictionary-sets
`

Usage

$3

In the config.js bring in the transform, register it to Style Dictionary and add it to the transforms array.

`js
const StyleDictionary = require("style-dictionary");
const AttributeSetsTransform = require("style-dictionary-sets").AttributeSetsTransform;

StyleDictionary.registerTransform(AttributeSetsTransform);

module.exports = {
source: ["tokens/*/.json"],
platforms: {
JSON: {
buildPath: "dist/json/",
transforms: ["attribute/sets"],
files: ...
},
},
};

`

This will add the sets array property to the attributes object on DesignToken if a token path contains the keyword sets. The value added to the sets array is the subsequent string in the path object.

#### Examples

A source like this (tests/fixtures/basic.json):

`json
{
"component": {
"size": {
"sets": {
"mobile": {
"value": "15px"
},
"desktop": {
"value": "12px"
}
}
}
}
}
`

will transform the tokens to provide the following data to subsequent transforms and formatters:

`js
{
tokens: [
{
value: "15px",
filePath: "tests/fixtures/basic.json",
isSource: true,
original: { value: "15px" },
name: "component-size-sets-mobile",
attributes: { sets: ["mobile"] },
path: ["component", "size", "sets", "mobile"],
},
{
value: "12px",
filePath: "tests/fixtures/basic.json",
isSource: true,
original: { value: "12px" },
name: "component-size-sets-desktop",
attributes: { sets: ["desktop"] },
path: ["component", "size", "sets", "desktop"],
},
];
}
`

If you add multiple nested 'sets', it will add the subsequent strings in path order.

So this source data:

`json
{
"component": {
"size": {
"sets": {
"subSystemOne": {
"sets": {
"mobile": {
"value": "15px"
},
"desktop": {
"value": "12px"
}
}
},
"subSystemTwo": {
"sets": {
"mobile": {
"value": "16px"
},
"desktop": {
"value": "13px"
}
}
}
}
}
}
}
`

will add transform the tokens to have the sets attribute like this:

`js
{
tokens: [
{
value: "15px",
filePath: "tests/fixtures/nest-sets-no-refs.json",
isSource: true,
original: { value: "15px" },
name: "component-size-sets-sub-system-one-sets-mobile",
attributes: { sets: ["subSystemOne", "mobile"] },
path: ["component", "size", "sets", "subSystemOne", "sets", "mobile"],
},
{
value: "12px",
filePath: "tests/fixtures/nest-sets-no-refs.json",
isSource: true,
original: { value: "12px" },
name: "component-size-sets-sub-system-one-sets-desktop",
attributes: { sets: ["subSystemOne", "desktop"] },
path: ["component", "size", "sets", "subSystemOne", "sets", "desktop"],
},
{
value: "16px",
filePath: "tests/fixtures/nest-sets-no-refs.json",
isSource: true,
original: { value: "16px" },
name: "component-size-sets-sub-system-two-sets-mobile",
attributes: { sets: ["subSystemTwo", "mobile"] },
path: ["component", "size", "sets", "subSystemTwo", "sets", "mobile"],
},
{
value: "13px",
filePath: "tests/fixtures/nest-sets-no-refs.json",
isSource: true,
original: { value: "13px" },
name: "component-size-sets-sub-system-two-sets-desktop",
attributes: { sets: ["subSystemTwo", "desktop"] },
path: ["component", "size", "sets", "subSystemTwo", "sets", "desktop"],
},
];
}
`

$3

This utility converts font-weight values from standard Open Type syntax into a CSS-safe format.

| Value | Common weight name |
| -- | -- |
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
| 950 | Extra Black (Ultra Black) |

In the config.js bring in the transform, register it to Style Dictionary and add it to the transforms array.

`js
const StyleDictionary = require("style-dictionary");
const CSSOpenTypeTransform = require("style-dictionary-sets").CSSOpenTypeTransform;

StyleDictionary.registerTransform(CSSOpenTypeTransform);

module.exports = {
source: ["tokens/*/.json"],
platforms: {
JSON: {
buildPath: "dist/json/",
transforms: [CSSOpenTypeTransform.name],
files: ...
},
},
};
``

$3

Some of this functionality is still being updated and refined for specific uses.

$3

WIP