@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.
243 lines (242 loc) • 6.97 kB
JSON
{
"ams": {
"dialog": {
"background-color": {
"$value": "{ams.color.background.default}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-color": {
"$value": "{ams.dialog.background-color}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-radius": {
"$value": "initial",
"$extensions": {
"nl.amsterdam.type": "borderRadius"
}
},
"border-style": {
"$value": "solid",
"$extensions": {
"nl.amsterdam.type": "borderStyle"
}
},
"border-width": {
"$value": "{ams.border.width.m}",
"$extensions": {
"nl.amsterdam.type": "borderWidth"
}
},
"box-shadow": {
"$value": "initial",
"$extensions": {
"nl.amsterdam.type": "shadow"
}
},
"gap": {
"$value": "{ams.space.m}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"inline-size": {
"$value": "calc(100% - 2 * {ams.space.l})",
"$extensions": {
"nl.amsterdam.type": "dimension"
}
},
"max-block-size": {
"$value": "calc(100dvh - 2 * {ams.space.l})",
"$extensions": {
"nl.amsterdam.type": "dimension"
}
},
"max-inline-size": {
"$value": {
"value": 48,
"unit": "rem"
},
"$type": "dimension"
},
"medium": {
"inline-size": {
"$deprecated": "Use `ams.dialog.vi-medium.inline-size` instead. Will be removed on or after 2026-10-20.",
"$value": "initial",
"$type": "dimension"
},
"max-block-size": {
"$deprecated": "Use `ams.dialog.vi-medium.max-block-size` instead. Will be removed on or after 2026-10-20.",
"$value": "initial",
"$type": "dimension"
}
},
"vi-medium": {
"inline-size": {
"$value": "calc(100% - 2 * {ams.space.xl})",
"$extensions": {
"nl.amsterdam.type": "dimension"
}
},
"max-block-size": {
"$value": "calc(100dvh - 2 * {ams.space.xl})",
"$extensions": {
"nl.amsterdam.type": "dimension"
}
}
},
"backdrop": {
"background-color": {
"$value": "rgb(24 24 24 / 62.5%)",
"$type": "color"
}
},
"header": {
"gap": {
"$value": "{ams.space.m}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"padding-block": {
"$value": "{ams.space.l} 0",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"padding-inline": {
"$value": "{ams.space.l}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"medium": {
"padding-block": {
"$deprecated": "Use `ams.dialog.header.vi-medium.padding-block` instead. Will be removed on or after 2026-10-20.",
"$value": "initial",
"$type": "dimension",
"$extensions": {
"nl.amsterdam.subtype": "space"
}
},
"padding-inline": {
"$deprecated": "Use `ams.dialog.header.vi-medium.padding-inline` instead. Will be removed on or after 2026-10-20.",
"$value": "initial",
"$type": "dimension",
"$extensions": {
"nl.amsterdam.subtype": "space"
}
}
},
"vi-medium": {
"padding-block": {
"$value": "{ams.space.xl} 0",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"padding-inline": {
"$value": "{ams.space.xl}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
}
}
},
"body": {
"padding-block": {
"$value": "0",
"$type": "dimension",
"$extensions": {
"nl.amsterdam.subtype": "space"
}
},
"padding-inline": {
"$value": "{ams.space.l}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"medium": {
"padding-inline": {
"$deprecated": "Use `ams.dialog.body.vi-medium.padding-inline` instead. Will be removed on or after 2026-10-20.",
"$value": "initial",
"$type": "dimension",
"$extensions": {
"nl.amsterdam.subtype": "space"
}
}
},
"vi-medium": {
"padding-inline": {
"$value": "{ams.space.xl}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
}
}
},
"footer": {
"padding-block": {
"$value": "0 {ams.space.l}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"padding-inline": {
"$value": "{ams.space.l}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"medium": {
"padding-block": {
"$deprecated": "Use `ams.dialog.footer.vi-medium.padding-block` instead. Will be removed on or after 2026-10-20.",
"$value": "initial",
"$type": "dimension",
"$extensions": {
"nl.amsterdam.subtype": "space"
}
},
"padding-inline": {
"$deprecated": "Use `ams.dialog.footer.vi-medium.padding-inline` instead. Will be removed on or after 2026-10-20.",
"$value": "initial",
"$type": "dimension",
"$extensions": {
"nl.amsterdam.subtype": "space"
}
}
},
"vi-medium": {
"padding-block": {
"$value": "0 {ams.space.xl}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"padding-inline": {
"$value": "{ams.space.xl}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
}
}
}
}
}
}