Design tokens with Theo
Thu Sep 26 2019 🍵 0 min read
In my never-ending quest in finding the right CSS structure that will allow easy theming, I have done a lot of reading and research into design tokens and how this will help me achieve my aim of writing CSS that can easily be overridden with little effort. In short, design tokens are used to avoid hardcoded values that are reusable in your CSS. Design tokens are used to store variables such as typography, spacing, and colours that will be shared across platforms like web, iOS, and Android. It's a very similar concept with CSS variables, which contains values that are reused throughout a document. (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
It was during a discussion I had with a coworker about CSS refactoring and design tokens that I discovered the existence of Theo. Theo is a tool developed by Salesforce that helps you automate the generation of your design tokens. Theo consumes JSON or YAML design token files and transforms the configured values into the format that best suits your needs.
Below is a very simple JSON design token file (raw.json):
{
"global": {
"type": "font",
"category": "font"
},
"props": {
"font-family": {
"value": "Arial, sans-serif",
"category": "font"
},
"font-size-x-small": {
"value": "10px",
"category": "font-size"
},
"font-size-small": {
"value": "11px",
"category": "font-size"
},
"font-size-normal": {
"value": "13px",
"category": "font-size"
},
"font-size-large": {
"value": "22px",
"category": "font-size"
},
"font-size-x-large": {
"value": "24px",
"category": "font-size"
},
"font-weight-light": {
"value": "200",
"category": "font-weight"
},
"font-weight-normal": {
"value": "400",
"category": "font-weight"
},
"font-weight-bold": {
"value": "600",
"category": "font-weight"
},
"font-weight-bolder": {
"value": "700",
"category": "font-weight"
}
}
}
I can then choose to output this raw values as SASS variables
theo.convert({
transform: {
type: "web",
file: "raw.json"
},
format: {
type: "scss"
}
})
.then(scss => {
// save
})
.catch(error => console.log(`Something went wrong: ${error}`));
The output:
$font-family: Arial, sans-serif;
$font-size-x-small: 10px;
$font-weight-bolder: 700;
$font-size-large: 22px;
$font-size-normal: 13px;
$font-size-x-large: 24px;
$font-size-small: 11px;
$font-weight-bold: 600;
$font-weight-normal: 400;
$font-weight-light: 100;
Below is a very simple YAML design token file:
props:
black:
value: '#000'
white:
value: '#fff'
global:
type: colors
category: colors
Isn't it just neat? It just works and your design tokens can easily be are sorted into categories. For smaller applications and personal projects, it's a no brainer that Theo is a perfect solution. I have yet to use Theo on a large-scale but I am confident that it would work just as well.
If your still doubtful, Why not give Theo a shot and see how you like it 😁