This example helps you transform in kebabCase the name all collections, groups, tokens and modes. Use this example if you want to generate CSS Custom properties with the to-css-custom-properties parser.
{"Colors": {"$collection": { "$modes": ["Light","Dark"] },"Core": {"blue 100": {"$type":"color","$description":"token 1 aliased with n modes within collection within n groups","$value": {"Light": {"red":255,"blue":255,"alpha":1,"green":255,"model":"rgb" },"Dark": {"red":229,"blue":29,"alpha":1,"green":29,"model":"rgb" } } },"blue 700": {"$type":"color","$description":"token 2 aliased with n modes within collection within n groups","$value": {"Light": {"red":255,"blue":255,"alpha":1,"green":200,"model":"rgb" },"Dark": {"red":229,"blue":0,"alpha":1,"green":0,"model":"rgb" } } } },"semantic": {"background": {"button": {"primary": {"hover": {"$type":"color","$description":"alias token with n modes within collection within n groups","$value": {"Dark": {"$mode":"dark","$alias":"Colors.Core.blue 100" },"Light": {"$mode":"light","$alias":"Colors.Core.blue 700" } } } } } } } }}
We change the case of the token names and the modes to kebabCase. We applyTo the collection level so we transform in kebabCase:
the collection names
the group names
the token names
the mode names
We eventually generate our transformed SDTF graph in a JSON file thanks to the to-sdtf parser.
.specifyrc.json
{"version":"2","repository":"@organization/repository",// Only use the personalAccessToken when working with the CLI"personalAccessToken":"<your-personal-access-token>","rules": [ {"name":"Format all token names and modes to kebabCase and generate tokens in JSON","parsers": [ {"name":"change-case","options": {"change":"names","toCase":"kebabCase","applyTo": {"collection":true } } }, {"name":"change-case","options": {"change":"modes","toCase":"kebabCase","applyTo": {"collection":true } } }, {"name":"to-sdtf","output": {"type":"file","filePath":"tokens.json" } } ] } ]}
tokens.json
{"colors": {"$collection": { "$modes": ["light","dark"] },"core": {"blue-100": {"$type":"color","$description":"token 1 aliased with n modes within collection within n groups","$value": {"light": {"red":255,"blue":255,"alpha":1,"green":255,"model":"rgb" },"dark": {"red":229,"blue":29,"alpha":1,"green":29,"model":"rgb" } } },"blue-700": {"$type":"color","$description":"token 2 aliased with n modes within collection within n groups","$value": {"light": {"red":255,"blue":255,"alpha":1,"green":200,"model":"rgb" },"dark": {"red":229,"blue":0,"alpha":1,"green":0,"model":"rgb" } } } },"semantic": {"background": {"button": {"primary": {"hover": {"$type":"color","$description":"alias token with n modes within collection within n groups","$value": {"dark": {"$mode":"dark","$alias":"colors.core.blue-100" },"light": {"$mode":"light","$alias":"colors.core.blue-700" } } } } } } } }}
Parameter
Required
Type
Default
Description
change
optional
'names' | 'modes'
'names'
Change the names or the modes of the selected items.
The selection where to apply the transformation.
collection, group, token take a Regex string or true to select anything of the kind.
An SDTFQuery can be used for advance use cases. Learn more about how to query your SDTF graph.