@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.
124 lines (123 loc) • 3.16 kB
JSON
{
"ams": {
"alert": {
"background-color": {
"$value": "{ams.color.background.default}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-color": {
"$value": "{ams.color.feedback.info}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-style": {
"$value": "solid",
"$extensions": {
"nl.amsterdam.type": "borderStyle"
}
},
"border-width": {
"$value": "{ams.border.width.xl}",
"$extensions": {
"nl.amsterdam.type": "borderWidth"
}
},
"severity-indicator": {
"background-color": {
"$value": "{ams.color.feedback.info}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"padding-block": {
"$value": "{ams.space.m}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"padding-inline": {
"$value": "{ams.space.s}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
}
},
"content": {
"gap": {
"$value": "{ams.space.s}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"padding-block": {
"$value": "{ams.space.m}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"padding-inline": {
"$value": "{ams.space.m}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
}
},
"error": {
"border-color": {
"$value": "{ams.color.feedback.error}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"severity-indicator": {
"background-color": {
"$value": "{ams.color.feedback.error}",
"$extensions": {
"nl.amsterdam.type": "color"
}
}
}
},
"success": {
"border-color": {
"$value": "{ams.color.feedback.success}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"severity-indicator": {
"background-color": {
"$value": "{ams.color.feedback.success}",
"$extensions": {
"nl.amsterdam.type": "color"
}
}
}
},
"warning": {
"border-color": {
"$value": "{ams.color.feedback.warning}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"severity-indicator": {
"background-color": {
"$value": "{ams.color.feedback.warning}",
"$extensions": {
"nl.amsterdam.type": "color"
}
}
}
}
}
}
}