to-json
This parser helps you pull design tokens in JSON with token values in JSON or CSS.
Interface
interface parser {
name: 'to-json';
output: {
type: 'file';
filePath: string;
};
options?: {
output?: 'raw' | 'css';
};
}Basic usage - JSON token values
{
"colors": {
"$collection": {
"$modes": [
"light",
"dark"
]
},
"Core": {
"blue-100": {
"$type": "color",
"$value": {
"dark": {
"red": 229,
"blue": 29,
"alpha": 1,
"green": 29,
"model": "rgb"
},
"light": {
"red": 255,
"blue": 255,
"alpha": 1,
"green": 255,
"model": "rgb"
}
},
"$description": "token 1 aliased with n modes within collection within n groups"
},
"blue-700": {
"$type": "color",
"$value": {
"dark": {
"red": 229,
"blue": 0,
"alpha": 1,
"green": 0,
"model": "rgb"
},
"light": {
"red": 255,
"blue": 255,
"alpha": 1,
"green": 200,
"model": "rgb"
}
},
"$description": "token 2 aliased with n modes within collection within n groups"
}
},
"semantic": {
"background": {
"button": {
"primary": {
"hover": {
"$type": "color",
"$value": {
"dark": {
"$mode": "dark",
"$alias": "colors.Core.blue-100"
},
"light": {
"$mode": "light",
"$alias": "colors.Core.blue-700"
}
},
"$description": "alias token with n modes within collection within n groups"
}
}
}
}
}
}
}.specifyrc.json
{
"version": "2",
"repository": "@organization/repository",
// Only use the personalAccessToken when working with the CLI
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "To JSON",
"parsers": [
{
"name": "to-json",
"output": {
"type": "file",
"filePath": "tokens.json"
}
}
]
}
]
}tokens.json
{
"colors": {
"Core": {
"blue-100": {
"dark": {
"model": "rgb",
"red": 229,
"green": 29,
"blue": 29,
"alpha": 1
},
"light": {
"model": "rgb",
"red": 255,
"green": 255,
"blue": 255,
"alpha": 1
}
},
"blue-700": {
"dark": {
"model": "rgb",
"red": 229,
"green": 0,
"blue": 0,
"alpha": 1
},
"light": {
"model": "rgb",
"red": 255,
"green": 200,
"blue": 255,
"alpha": 1
}
}
},
"semantic": {
"background": {
"button": {
"primary": {
"hover": {
"dark": {
"model": "rgb",
"red": 229,
"green": 29,
"blue": 29,
"alpha": 1
},
"light": {
"model": "rgb",
"red": 255,
"green": 200,
"blue": 255,
"alpha": 1
}
}
}
}
}
}
}
}Advanced usage - CSS token values
{
"colors": {
"$collection": {
"$modes": [
"light",
"dark"
]
},
"Core": {
"blue-100": {
"$type": "color",
"$value": {
"dark": {
"red": 229,
"blue": 29,
"alpha": 1,
"green": 29,
"model": "rgb"
},
"light": {
"red": 255,
"blue": 255,
"alpha": 1,
"green": 255,
"model": "rgb"
}
},
"$description": "token 1 aliased with n modes within collection within n groups"
},
"blue-700": {
"$type": "color",
"$value": {
"dark": {
"red": 229,
"blue": 0,
"alpha": 1,
"green": 0,
"model": "rgb"
},
"light": {
"red": 255,
"blue": 255,
"alpha": 1,
"green": 200,
"model": "rgb"
}
},
"$description": "token 2 aliased with n modes within collection within n groups"
}
},
"semantic": {
"background": {
"button": {
"primary": {
"hover": {
"$type": "color",
"$value": {
"dark": {
"$mode": "dark",
"$alias": "colors.Core.blue-100"
},
"light": {
"$mode": "light",
"$alias": "colors.Core.blue-700"
}
},
"$description": "alias token with n modes within collection within n groups"
}
}
}
}
}
}
}.specifyrc.json
{
"version": "2",
"repository": "@organization/repository",
// Only use the personalAccessToken when working with the CLI
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "To JSON",
"parsers": [
{
"name": "to-json",
"output": {
"type": "file",
"filePath": "tokens.json"
},
"options": {
"output": "css"
}
}
]
}
]
}tokens.json
{
"colors": {
"Core": {
"blue-100": {
"dark": "rgb(229, 29, 29)",
"light": "rgb(255, 255, 255)"
},
"blue-700": {
"dark": "rgb(229, 0, 0)",
"light": "rgb(255, 200, 255)"
}
},
"semantic": {
"background": {
"button": {
"primary": {
"hover": {
"dark": "rgb(229, 29, 29)",
"light": "rgb(255, 200, 255)"
}
}
}
}
}
}
}Last updated