@open-inwoner/design-tokens/src/community/utrecht/button.tokens.json

Design tokens for Open Inwoner

{
  "utrecht": {
    "button": {
      "background-color": {"value": "transparent"},
      "border-color": {"value": "transparent"},
      "border-radius": {"value": "3px"},
      "border-width": {"value": "1px"},
      "color": {"value": "{oip.color.secondary}"},
      "cursor": {"value": "pointer"},
      "font-size": {"value": "{oip.text.font-size}"},
      "line-height": {"value": "{oip.text.line-height}"},
      "min-block-size": {"value": "0"},
      "min-inline-size": {"value": "0"},
      "padding-block-start": {"value": "16px"},
      "padding-block-end": {"value": "16px"},
      "padding-inline-start": {"value": "32px"},
      "padding-inline-end": {"value": "32px"},

      "focus": {
        "border-color": {"value": "transparent"},
        "color": {"value": "{oip.color.secondary}"}
      },

      "hover": {
        "background-color": {"value": "transparent"},
        "border-color": {"value": "transparent"},
        "color": {"value": "{oip.color.secondary}"}
      },

      "primary-action": {
        "background-color": {"value": "{oip.color.primary}"},
        "border-color": {
          "value": "{oip.color.primary}",
          "comment": "The primary button-background color determined by the configuration."
        },
        "color": {"value": "#ffffff"},

        "hover": {
          "background-color": {"value": "{oip.color.primary-darker}"},
          "border-color": {"value": "{oip.color.primary-darker}"},
          "color": {"value": "#ffffff"}
        },

        "focus": {
          "background-color": {"value": "{oip.color.primary-darker}"},
          "border-color": {"value": "{oip.color.primary-darker}"},
          "color": {"value": "#ffffff"}
        },

        "warning": {
          "background-color": {"value": "{oip.color.danger-lightest}"},
          "border-color": {"value": "{oip.color.danger-lightest}"},
          "color": {"value": "{oip.color.danger}"},

          "hover": {
            "background-color": {"value": "{oip.color.danger}"},
            "border-color": {"value": "{oip.color.danger}"},
            "color": {"value": "{oip.color.danger-lightest}"}
          }
        }
      },
      "secondary-action": {
        "background-color": {"value": "{oip.color.secondary}"},
        "border-color": {
          "value": "{oip.color.secondary}",
          "comment": "The secondary button-background color determined by the configuration."
        },
        "color": {"value": "#ffffff"},

        "hover": {
          "background-color": {"value": "{oip.color.secondary-darker}"},
          "border-color": {"value": "{oip.color.secondary-darker}"},
          "color": {"value": "#ffffff"}
        },

        "focus": {
          "background-color": {"value": "{oip.color.secondary-darker}"},
          "border-color": {"value": "{oip.color.secondary-darker}"},
          "color": {"value": "#ffffff"}
        }
      },
      "disabled": {
        "background-color": {"value": "{oip.color.gray}"},
        "border-color": {
          "value": "{oip.color.gray}",
          "comment": "Default gray for disabled elements"
        },
        "color": {"value": "#ffffff"}
      }
    }
  }
}