# Token Operations Systematic personality, less curation ## Imagine You've been tasked with supporting a new brand, and you've been given their entire styleguide. --- ![](/images/nasa-styleguide.png) ## How long will it take? ⏱️ ## 1.39 TPH (tokens per hour) - IBM Carbon: 100 tokens (~6 days) - Shopify Polaris: 238 tokens (~2 weeks) - Github Primer: 460 tokens (~3 weeks) - Salesforce Lightning: 480 tokens (~3 weeks) - Adobe Spectrum: 2750 tokens (~😵‍💫 weeks) ![](/images/donnie.png) --- Hi 👋, my name is Donnie D'Amato and I'm a Design Systems ~~Addict~~ ~~Antagonist~~ Architect. ## Microsoft Fluent Theme Designer --- ![Microsoft Fluent Theme Designer](/images/fluent-theme-designer.png) ## Tokens Studio Resolver --- ![Tokens Studio Resolver](/images/tokens-studio-resolver.png) ![](/images/resolver-output.png) ## How might we maintain relationships between token transformation in a human-readable manner? ## 🎯 Goals - [ ] Legible - [ ] Portable - [ ] Customizable ## **Token Operations** ## ⚠️ Incoming code (relax, it's only JSON) ```json { "font-size-2": { "$type": "dimension", "$value": "2rem" } } ``` ```json { "font-size-2": { "$type": "dimension", "$value": "2rem", "$operations": [...] } } ``` ## Multiple aliases ([#192](https://github.com/design-tokens/community-group/issues/192)) ```json { "some-token": { "$operations": [ "{hello}", "{world}", ["String.concat", "$0", " ", "$1"] ] } } ``` ## Custom units ([#218](https://github.com/design-tokens/community-group/issues/218)) ```json { "some-token-android": { "$operations": [ "{font-size-base}", // "20" "{android.unit}", // "dp" ["String.concat", "$0", "$1"] ] } } ``` ## Platform tokens ([#226](https://github.com/design-tokens/community-group/issues/226)) ```json { "shadow1": { "css": { // concat for single CSS value "$operations": [...] }, "android": { // concat for single android value "$operations": [...] } } } ``` ## Conditional values ([#169](https://github.com/design-tokens/community-group/issues/169)) ```json { "conditional-token": { "$operations": [ ["Import.operations", "token-operations/lib/binary-if-string", 1, "yellow", "purple"] ] } } ``` ## Future possibilities ```json // Not yet in token-operations, but could be! { "some-token": { "$operations": [ ["Import.token", "./some/token/file.json", "{colors.base.primary}"] ] } } ``` ## 🎯 Goals - [x] Legible - [x] Portable - [x] Customizable - IBM Carbon: 100 tokens (~6 days) - Shopify Polaris: 238 tokens (~2 weeks) - Github Primer: 460 tokens (~3 weeks) - Salesforce Lightning: 480 tokens (~3 weeks) - Adobe Spectrum: 2750 tokens (~😵‍💫 weeks) - IBM Carbon: _10 tokens (~14 hours)_ - Shopify Polaris: _23 tokens (~1 day)_ - Github Primer: _46 tokens (~2 days)_ - Salesforce Lightning: _48 tokens (~2 days)_ - Adobe Spectrum: _275 tokens (~😌 weeks)_ ## 💾 Try it today! `npm i token-operations`