Component tokens
Some of our components have specific size attached to them. Their value is independent of the global scale to ensure components are rendered correctly regardless of the global values.
Button size tokens
Controls the minimum height of button component for each size variant. Each token is defined by combining the base tokens.
"size": {
"button": {
"nano": {
"$type": "dimension",
"$value": "{size.button.base} - 2 * {size.button.factor}"
}
}
}
Base button size tokens
Used to calculate the rest of the scale, not used in exported variables.
"size": {
"button": {
"base": {
"$type": "dimension",
"$value": "2.25rem",
"$description": "Base size token used in size calculations. Not used outside design tokens"
},
"factor": {
"$type": "dimension",
"$value": "0.5rem",
"$description": "Base modifier used in size calculations. Not used outside design tokens"
}
}
}