@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.
515 lines (514 loc) • 15.5 kB
JSON
{
"ams": {
"progress-list": {
"heading-2": {
"step": {
"marker": {
"block-size": {
"$value": "calc({ams.typography.heading.2.font-size} * {ams.typography.heading.2.line-height})",
"$extensions": {
"nl.amsterdam.type": "dimension"
}
},
"margin-block-start": {
"$value": "calc(({ams.typography.heading.2.line-height} * {ams.typography.heading.2.font-size}) / 2)",
"$extensions": {
"nl.amsterdam.type": "dimension"
}
}
}
}
},
"heading-3": {
"step": {
"marker": {
"block-size": {
"$value": "calc({ams.typography.heading.3.font-size} * {ams.typography.heading.3.line-height})",
"$extensions": {
"nl.amsterdam.type": "dimension"
}
},
"margin-block-start": {
"$value": "calc(({ams.typography.heading.3.line-height} * {ams.typography.heading.3.font-size}) / 2)",
"$extensions": {
"nl.amsterdam.type": "dimension"
}
}
}
}
},
"heading-4": {
"step": {
"marker": {
"block-size": {
"$value": "calc({ams.typography.heading.4.font-size} * {ams.typography.heading.4.line-height})",
"$extensions": {
"nl.amsterdam.type": "dimension"
}
},
"margin-block-start": {
"$value": "calc(({ams.typography.heading.4.line-height} * {ams.typography.heading.4.font-size}) / 2)",
"$extensions": {
"nl.amsterdam.type": "dimension"
}
}
}
}
},
"button": {
"color": {
"$value": "{ams.color.interactive.default}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"cursor": {
"$value": "{ams.cursor.interactive}",
"$extensions": {
"nl.amsterdam.type": "cursor"
}
},
"gap": {
"$value": "{ams.space.s}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"outline-offset": {
"$value": "{ams.focus.outline-offset}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"padding-block": {
"$value": "0",
"$type": "dimension",
"$extensions": {
"nl.amsterdam.subtype": "space"
}
},
"padding-inline": {
"$value": "0",
"$type": "dimension",
"$extensions": {
"nl.amsterdam.subtype": "space"
}
},
"hover": {
"color": {
"$value": "{ams.color.interactive.hover}",
"$extensions": {
"nl.amsterdam.type": "color"
}
}
}
},
"icon": {
"transition-duration": {
"$value": "0.3s",
"$type": "duration"
},
"transition-timing-function": {
"$value": "ease",
"$extensions": {
"nl.amsterdam.type": "transitionTimingFunction"
}
}
},
"step": {
"gap": {
"$value": "{ams.space.m}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"medium": {
"gap": {
"$deprecated": "Use `ams.progress-list.step.vi-medium.gap` instead. Will be removed on or after 2026-10-20.",
"$value": "initial",
"$type": "dimension",
"$extensions": {
"nl.amsterdam.subtype": "space"
}
}
},
"vi-medium": {
"gap": {
"$value": "{ams.space.l}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
}
},
"marker": {
"shape": {
"block-size": {
"$value": {
"value": 1.5,
"unit": "rem"
},
"$type": "dimension"
},
"background-color": {
"$value": "{ams.color.background.default}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-color": {
"$value": "{ams.color.progress.upcoming}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-style": {
"$value": "solid",
"$extensions": {
"nl.amsterdam.type": "borderStyle"
}
},
"border-width": {
"$value": "{ams.border.width.m}",
"$extensions": {
"nl.amsterdam.type": "borderWidth"
}
},
"outline-color": {
"$value": "{ams.color.background.default}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"outline-style": {
"$value": "solid",
"$extensions": {
"nl.amsterdam.type": "borderStyle"
}
},
"outline-width": {
"$value": "{ams.border.width.m}",
"$extensions": {
"nl.amsterdam.type": "borderWidth"
}
}
}
},
"connector": {
"border-inline-color": {
"$value": "{ams.color.progress.upcoming}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-inline-style": {
"$value": "dashed",
"$extensions": {
"nl.amsterdam.type": "borderStyle"
}
},
"border-inline-width": {
"$value": {
"value": 1,
"unit": "px"
},
"$type": "dimension"
}
},
"heading": {
"margin-block-end": {
"$value": "{ams.space.s}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
}
},
"content": {
"margin-block-end": {
"$value": "{ams.space.l}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
}
},
"completed": {
"marker": {
"shape": {
"background-color": {
"$value": "{ams.color.progress.completed}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-color": {
"$value": "{ams.color.progress.completed}",
"$extensions": {
"nl.amsterdam.type": "color"
}
}
}
},
"connector": {
"border-inline-color": {
"$value": "{ams.color.progress.completed}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-inline-style": {
"$value": "solid",
"$extensions": {
"nl.amsterdam.type": "borderStyle"
}
}
}
},
"current": {
"marker": {
"shape": {
"background-color": {
"$value": "{ams.color.progress.current}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-color": {
"$value": "{ams.color.progress.current}",
"$extensions": {
"nl.amsterdam.type": "color"
}
}
}
},
"connector": {
"border-inline-color": {
"$value": "{ams.color.progress.current}",
"$extensions": {
"nl.amsterdam.type": "color"
}
}
}
}
},
"substeps": {
"padding-block-start": {
"$value": "{ams.space.m}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"step": {
"indicator": {
"margin-inline-end": {
"$value": "{ams.space.m}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
},
"medium": {
"margin-inline-end": {
"$deprecated": "Use `ams.progress-list.substeps.step.indicator.vi-medium.margin-inline-end` instead. Will be removed on or after 2026-10-20.",
"$value": "initial",
"$type": "dimension",
"$extensions": {
"nl.amsterdam.subtype": "space"
}
}
},
"vi-medium": {
"margin-inline-end": {
"$value": "{ams.space.l}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
}
}
},
"marker": {
"block-size": {
"$value": "calc({ams.typography.body-text.font-size} * {ams.typography.body-text.line-height})",
"$extensions": {
"nl.amsterdam.type": "dimension"
}
},
"inline-size": {
"$value": "{ams.progress-list.step.marker.shape.block-size}",
"$extensions": {
"nl.amsterdam.type": "dimension"
}
},
"shape": {
"block-size": {
"$value": "0.75rem",
"$type": "dimension"
},
"background-color": {
"$value": "{ams.color.background.default}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-color": {
"$value": "{ams.color.progress.upcoming}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-style": {
"$value": "solid",
"$extensions": {
"nl.amsterdam.type": "borderStyle"
}
},
"border-width": {
"$value": "{ams.border.width.m}",
"$extensions": {
"nl.amsterdam.type": "borderWidth"
}
},
"outline-color": {
"$value": "{ams.color.background.default}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"outline-style": {
"$value": "solid",
"$extensions": {
"nl.amsterdam.type": "borderStyle"
}
},
"outline-width": {
"$value": "{ams.border.width.m}",
"$extensions": {
"nl.amsterdam.type": "borderWidth"
}
}
}
},
"connector": {
"background-color": {
"$value": "{ams.color.background.default}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-inline-color": {
"$value": "{ams.color.progress.upcoming}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-inline-style": {
"$value": "dashed",
"$extensions": {
"nl.amsterdam.type": "borderStyle"
}
},
"border-inline-width": {
"$value": {
"value": 1,
"unit": "px"
},
"$extensions": {
"nl.amsterdam.type": "borderWidth"
}
},
"margin-block-start": {
"$value": "calc({ams.typography.body-text.font-size} * {ams.typography.body-text.line-height} / 2)",
"$extensions": {
"nl.amsterdam.type": "dimension"
}
},
"last-child": {
"border-inline-color": {
"$value": "{ams.color.background.default}",
"$extensions": {
"nl.amsterdam.type": "color"
}
}
}
},
"content": {
"margin-block-end": {
"$value": "{ams.space.m}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
}
},
"completed": {
"marker": {
"shape": {
"background-color": {
"$value": "{ams.color.progress.completed}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-color": {
"$value": "{ams.color.progress.completed}",
"$extensions": {
"nl.amsterdam.type": "color"
}
}
}
},
"connector": {
"border-inline-color": {
"$value": "{ams.color.progress.completed}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-inline-style": {
"$value": "solid",
"$extensions": {
"nl.amsterdam.type": "borderStyle"
}
}
}
},
"current": {
"marker": {
"shape": {
"background-color": {
"$value": "{ams.color.progress.current}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"border-color": {
"$value": "{ams.color.progress.current}",
"$extensions": {
"nl.amsterdam.type": "color"
}
}
}
}
}
},
"last-child": {
"content": {
"margin-block-end": {
"$value": "{ams.space.l}",
"$extensions": {
"nl.amsterdam.subtype": "space",
"nl.amsterdam.type": "dimension"
}
}
}
}
}
}
}
}