@amsterdam/design-system-tokens
Version:
All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.
102 lines (101 loc) • 2.42 kB
JSON
{
"ams": {
"switch": {
"background-color": {
"$value": "#767676",
"$type": "color"
},
"cursor": {
"$value": "{ams.cursor.interactive}",
"$extensions": {
"nl.amsterdam.type": "cursor"
}
},
"outline-offset": {
"$value": "{ams.focus.outline-offset}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"inline-size": {
"$value": {
"value": 3.5,
"unit": "rem"
},
"$type": "dimension"
},
"thumb": {
"background-color": {
"$value": "{ams.color.background.default}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"block-size": {
"$value": {
"value": 1.75,
"unit": "rem"
},
"$type": "dimension"
},
"inline-size": {
"$value": {
"value": 1.75,
"unit": "rem"
},
"$type": "dimension"
},
"hover": {
"box-shadow": {
"$type": "shadow",
"$value": {
"offsetX": {
"value": 0,
"unit": "rem"
},
"offsetY": {
"value": 0,
"unit": "rem"
},
"blur": {
"value": 0,
"unit": "rem"
},
"spread": "{ams.border.width.m}",
"color": "{ams.switch.thumb.hover.color}"
}
},
"color": {
"$value": "{ams.color.interactive.hover}",
"$extensions": {
"nl.amsterdam.type": "color"
}
}
}
},
"checked": {
"background-color": {
"$value": "{ams.color.interactive.default}",
"$extensions": {
"nl.amsterdam.type": "color"
}
}
},
"disabled": {
"background-color": {
"$value": "{ams.color.interactive.disabled}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"cursor": {
"$value": "{ams.cursor.disabled}",
"$extensions": {
"nl.amsterdam.type": "cursor"
}
}
}
}
}
}