@utrecht/button-css
Version:
Button component for the Municipality of Utrecht based on the NL Design System architecture
1,390 lines (1,389 loc) • 45.3 kB
JSON
{
"utrecht": {
"button": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-radius": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length-percentage>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "borderRadius"
},
"border-width": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "borderWidth"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"column-gap": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
}
},
"type": "spacing"
},
"font-family": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "*",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.document.font-family"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "fontFamilies"
},
"font-size": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "fontSizes"
},
"font-weight": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<number>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "fontWeights"
},
"inline-size": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "sizing"
},
"line-height": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": ["<length>", "<number>"],
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "lineHeights"
},
"margin-block-start": {
"$extensions": {
"nl.nldesignsystem.hidden": true,
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": false
},
"type": "spacing"
},
"margin-block-end": {
"$extensions": {
"nl.nldesignsystem.hidden": true,
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": false
},
"type": "spacing"
},
"margin-inline-start": {
"$extensions": {
"nl.nldesignsystem.hidden": true,
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": false
},
"type": "spacing"
},
"margin-inline-end": {
"$extensions": {
"nl.nldesignsystem.hidden": true,
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": false
},
"type": "spacing"
},
"min-block-size": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "sizing"
},
"min-inline-size": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "sizing"
},
"padding-block-start": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "spacing"
},
"padding-block-end": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "spacing"
},
"padding-inline-start": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "spacing"
},
"padding-inline-end": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "spacing"
},
"text-transform": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": ["inherit", "uppercase"],
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": false
},
"type": "textCase"
},
"active": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.background-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.border-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"icon": {
"size": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "sizing"
}
},
"disabled": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.background-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.border-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"focus": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.background-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.border-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"scale": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<number>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": false
},
"type": "other"
}
},
"hover": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.background-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.border-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"scale": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<number>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": false
},
"type": "other"
}
},
"pressed": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.background-color"],
"nl.nldesignsystem.figma.supports-token": false
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.border-color"],
"nl.nldesignsystem.figma.supports-token": false
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.color"],
"nl.nldesignsystem.figma.supports-token": false
},
"type": "color"
}
},
"primary-action": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.background-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.border-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-width": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.border-width"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "borderWidth"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"font-size": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.font-size"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "fontSizes"
},
"font-weight": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<number>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.font-weight"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "fontWeights"
},
"line-height": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": ["<length>", "<number>"],
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.line-height"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "lineHeights"
},
"active": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.active.background-color",
"utrecht.button.primary-action.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.active.border-color",
"utrecht.button.primary-action.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.active.color",
"utrecht.button.primary-action.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"disabled": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.disabled.background-color",
"utrecht.button.primary-action.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.disabled.border-color",
"utrecht.button.primary-action.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.disabled.color",
"utrecht.button.primary-action.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"hover": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.hover.background-color",
"utrecht.button.primary-action.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.hover.border-color",
"utrecht.button.primary-action.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.active.color",
"utrecht.button.primary-action.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"scale": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<number>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": false
},
"type": "other"
}
},
"focus": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.focus.background-color",
"utrecht.button.primary-action.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.focus.border-color",
"utrecht.button.primary-action.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.focus.color",
"utrecht.button.primary-action.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"pressed": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.pressed.background-color",
"utrecht.button.primary-action.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": false
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.pressed.border-color",
"utrecht.button.primary-action.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": false
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.pressed.color",
"utrecht.button.primary-action.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": false
},
"type": "color"
}
}
},
"secondary-action": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.background-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.border-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-width": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.border-width"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "borderWidth"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"font-size": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.font-size"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "fontSizes"
},
"font-weight": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<number>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.font-weight"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "fontWeights"
},
"line-height": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": ["<length>", "<number>"],
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.line-height"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "lineHeights"
},
"active": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.active.background-color",
"utrecht.button.secondary-action.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.active.border-color",
"utrecht.button.secondary-action.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.active.color",
"utrecht.button.secondary-action.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"disabled": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.disabled.background-color",
"utrecht.button.secondary-action.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.disabled.border-color",
"utrecht.button.secondary-action.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.disabled.color",
"utrecht.button.secondary-action.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"hover": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.hover.background-color",
"utrecht.button.secondary-action.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.hover.border-color",
"utrecht.button.secondary-action.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.hover.color",
"utrecht.button.secondary-action.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"focus": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.focus.background-color",
"utrecht.button.secondary-action.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.focus.border-color",
"utrecht.button.secondary-action.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.focus.color",
"utrecht.button.secondary-action.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"pressed": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.pressed.background-color",
"utrecht.button.secondary-action.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": false
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.pressed.border-color",
"utrecht.button.secondary-action.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": false
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.pressed.color",
"utrecht.button.secondary-action.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": false
},
"type": "color"
}
}
},
"subtle": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.background-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.border-color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-width": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.border-width"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "borderWidth"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.color"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"font-size": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.font-size"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "fontSizes"
},
"font-weight": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<number>",
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.font-weight"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "fontWeights"
},
"line-height": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": ["<length>", "<number>"],
"inherits": true
},
"nl.nldesignsystem.fallback": ["utrecht.button.line-height"],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "lineHeights"
},
"active": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.active.background-color",
"utrecht.button.subtle.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.active.border-color",
"utrecht.button.subtle.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.active.color",
"utrecht.button.subtle.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"disabled": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.disabled.background-color",
"utrecht.button.subtle.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.disabled.border-color",
"utrecht.button.subtle.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.disabled.color",
"utrecht.button.subtle.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"hover": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.hover.background-color",
"utrecht.button.subtle.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.hover.border-color",
"utrecht.button.subtle.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.hover.color",
"utrecht.button.subtle.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"focus": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.focus.background-color",
"utrecht.button.subtle.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.focus.border-color",
"utrecht.button.subtle.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.focus.color",
"utrecht.button.subtle.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"pressed": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.pressed.background-color",
"utrecht.button.subtle.background-color",
"utrecht.button.background-color"
],
"nl.nldesignsystem.figma.supports-token": false
},
"type": "color"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.pressed.border-color",
"utrecht.button.subtle.border-color",
"utrecht.button.border-color"
],
"nl.nldesignsystem.figma.supports-token": false
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.fallback": [
"utrecht.button.pressed.color",
"utrecht.button.subtle.color",
"utrecht.button.color"
],
"nl.nldesignsystem.figma.supports-token": false
},
"type": "color"
}
}
}
}
}
}