UNPKG

@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
{ "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" } } } } } }