register-view
This parser helps you register a SDTF view that can be later used by generation parser to allow for partial outputs of the token tree with no destructive mutations.
Interface
interface parser {
name: 'register-view';
options: {
name: string;
query: SDTFQuery;
};
}
Options
Basic usage: register a SDTF view for use with CSS output
{
"colors": {
"$collection": {
"$modes": ["light", "dark"]
},
"info": {
"infoToken": {
"$type": "color",
"$value": {
"light": {
"model": "rgb",
"red": 219,
"green": 234,
"blue": 254,
"alpha": 1
},
"dark": {
"model": "rgb",
"red": 219,
"green": 234,
"blue": 254,
"alpha": 1
}
}
}
},
"danger": {
"dangerToken": {
"$type": "color",
"$value": {
"light": {
"model": "rgb",
"red": 209,
"green": 204,
"blue": 204,
"alpha": 1
},
"dark": {
"model": "rgb",
"red": 19,
"green": 34,
"blue": 54,
"alpha": 1
}
}
}
}
}
}
We want to get all tokens in all groups named "info"
We also want to get the
parent
collection...... and all
children
tokens within the "info" group(s)We eventually generate our selected SDTF token tree in a CSS file thanks to the
to-css-custom-properties
parser.
.specifyrc.json
{
"version": "2",
"repository": "@organization/repository",
// Only use the personalAccessToken when working with the CLI
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Only get tokens from a group named 'info' and gererate tokens in JSON",
"parsers": [
{
"name": "register-view",
"options": {
"name": "Info only",
"query": {
"where": {
"group": "info",
"select": {
"parents": true,
"children": true
}
}
}
}
},
{
"name": "to-css-custom-properties",
"options": {
"withSDTFView": "Info only"
},
"output": {
"type": "file",
"filePath": "tokens.css"
}
}
]
}
]
}
tokens.css
:root[data-colors="light"] {
--info-infoToken: rgb(219, 234, 254);
}
:root[data-colors="dark"] {
--info-infoToken: rgb(219, 234, 254);
}
Last updated