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

Design tokens for Open Forms

{
  "utrecht": {
    "button": {
      "background-color": {"value": "{of.button.bg}"},
      "border-color": {"value": "rgba(0,0,0,0)"},
      "border-radius": {"value": "0"},
      "border-width": {"value": "2px"},
      "color": {"value": "{of.button.fg}"},
      "column-gap": {"value": "8px"},
      "font-size": {"value": "{of.text.big.font-size}"},
      "icon": {
        "gap": {"value": "{utrecht.button.column-gap}"},
        "size": {"value": "auto"}
      },
      "line-height": {"value": "1.333"},
      "min-block-size": {"value": "0"},
      "max-inline-size": {"value": "100%"},
      "min-inline-size": {"value": "0"},
      "padding-block-start": {"value": "10.003px"},
      "padding-block-end": {"value": "10.003px"},
      "padding-inline-start": {"value": "12px"},
      "padding-inline-end": {"value": "12px"},

      "focus": {
        "border-color": {"value": "transparent"}
      },

      "hover": {
        "background-color": {"value": "{of.button.hover.bg}"},
        "border-color": {"value": "#5e5e5e"},
        "color": {"value": "{of.button.fg}"}
      },

      "active": {
        "background-color": {"value": "{of.button.active.bg}"},
        "border-color": {"value": "{of.color.border}"},
        "color": {"value": "{of.button.active.fg}"}
      },

      "primary-action": {
        "background-color": {"value": "{of.button.primary.bg}"},
        "border-color": {"value": "{of.color.primary}"},
        "color": {"value": "{of.button.primary.fg}"},

        "hover": {
          "background-color": {"value": "{of.button.primary.hover.bg}"},
          "border-color": {"value": "#01537c"},
          "color": {"value": "{of.button.primary.fg}"}
        },

        "active": {
          "background-color": {"value": "{of.button.primary.active.bg}"},
          "border-color": {"value": "rgba(0,0,0,0)"},
          "color": {"value": "{of.button.primary.active.fg}"}
        },

        "focus": {
          "border-color": {"value": "transparent"}
        },

        "danger": {
          "background-color": {"value": "{of.button.danger.bg}"},
          "border-color": {"value": "#aa2218"},
          "color": {"value": "{of.button.danger.fg}"},

          "hover": {
            "background-color": {"value": "{of.button.danger.hover.bg}"},
            "border-color": {"value": "#881b13"},
            "color": {"value": "{of.button.danger.fg}"}
          },

          "active": {
            "background-color": {"value": "{of.button.danger.active.bg}"},
            "border-color": {"value": "rgba(0,0,0,0)"},
            "color": {"value": "{of.button.danger.active.fg}"}
          },

          "focus": {
            "border-color": {"value": "transparent"}
          }
        }
      },

      "secondary-action": {
        "border-color": {"value": "#5e5e5e"},

        "focus": {
          "border-color": {"value": "transparent"}
        },

        "danger": {
          "background-color": {"value": "{of.color.danger}"},
          "color": {"value": "{of.button.danger.fg}"},

          "focus": {
            "border-color": {"value": "transparent"}
          }
        }
      },

      "subtle": {
        "border": {
          "color": {
            "value": "rgba(0,0,0,0)"
          }
        },
        "hover": {
          "background": {
            "color": {
              "value": "{of.color.bg}"
            }
          }
        },
        "danger": {
          "color": {
            "value": "{of.color.danger}"
          },
          "background": {
            "color": {
              "value": "{of.color.bg}"
            }
          },
          "hover": {
            "background": {
              "color": {
                "value": "{of.color.bg}"
              }
            }
          },
          "active": {
            "background": {
              "color": {
                "value": "#a02017"
              }
            }
          }
        }
      },

      "disabled": {
        "background": {
          "color": {
            "value": "#b0b0b0"
          }
        },
        "color": {
          "value": "#ffffff"
        }
      }
    }
  }
}