@amsterdam/design-system-tokens/src/common/ams/inputs.tokens.json

All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.

{
  "ams": {
    "inputs": {
      "$description": "Shared base styles for all form input components: text inputs, selects, text areas, etc.",
      "background-color": {
        "$value": "{ams.color.background.default}",
        "$extensions": {
          "nl.amsterdam.type": "color"
        }
      },
      "border-color": {
        "$value": "currentColor",
        "$type": "color",
        "$description": "Uses currentColor so the border adapts to the text colour, including in error states."
      },
      "border-style": {
        "$value": "solid",
        "$extensions": {
          "nl.amsterdam.type": "borderStyle"
        }
      },
      "border-width": {
        "$value": "{ams.border.width.m}",
        "$extensions": {
          "nl.amsterdam.type": "borderWidth"
        }
      },
      "color": {
        "$value": "{ams.color.text.default}",
        "$extensions": {
          "nl.amsterdam.type": "color"
        }
      },
      "font-family": {
        "$value": "{ams.typography.font-family}",
        "$extensions": {
          "nl.amsterdam.type": "fontFamily"
        }
      },
      "font-size": {
        "$value": "{ams.typography.body-text.font-size}",
        "$extensions": {
          "nl.amsterdam.type": "fontSize"
        }
      },
      "font-weight": {
        "$value": "{ams.typography.body-text.font-weight}",
        "$extensions": {
          "nl.amsterdam.type": "fontWeight"
        }
      },
      "line-height": {
        "$value": 1.4,
        "$description": "Tighter than body text (1.6) to keep inputs compact. Buttons also use this to match.",
        "$extensions": {
          "nl.amsterdam.subtype": "lineHeight"
        },
        "$type": "number"
      },
      "outline-offset": {
        "$value": "{ams.focus.outline-offset}",
        "$extensions": {
          "nl.amsterdam.subtype": "space",
          "nl.amsterdam.type": "dimension"
        }
      },
      "padding-block": {
        "$value": "{ams.space.s}",
        "$extensions": {
          "nl.amsterdam.subtype": "space",
          "nl.amsterdam.type": "dimension"
        }
      },
      "padding-inline": {
        "$value": "{ams.space.m}",
        "$extensions": {
          "nl.amsterdam.subtype": "space",
          "nl.amsterdam.type": "dimension"
        }
      },
      "disabled": {
        "color": {
          "$value": "{ams.color.interactive.disabled}",
          "$extensions": {
            "nl.amsterdam.type": "color"
          }
        }
      },
      "hover": {
        "box-shadow": {
          "$type": "shadow",
          "$description": "An inset shadow that reinforces the border on hover without shifting the layout.",
          "$value": {
            "inset": true,
            "offsetX": {
              "value": 0,
              "unit": "rem"
            },
            "offsetY": {
              "value": 0,
              "unit": "rem"
            },
            "blur": {
              "value": 0,
              "unit": "rem"
            },
            "spread": "{ams.border.width.s}",
            "color": "currentColor"
          }
        }
      },
      "invalid": {
        "border-color": {
          "$value": "{ams.color.interactive.invalid.default}",
          "$extensions": {
            "nl.amsterdam.type": "color"
          }
        },
        "hover": {
          "border-color": {
            "$value": "{ams.color.interactive.invalid.hover}",
            "$extensions": {
              "nl.amsterdam.type": "color"
            }
          },
          "box-shadow": {
            "$type": "shadow",
            "$description": "An inset shadow using the hover variation of the invalid interactive colour.",
            "$value": {
              "inset": true,
              "offsetX": {
                "value": 0,
                "unit": "rem"
              },
              "offsetY": {
                "value": 0,
                "unit": "rem"
              },
              "blur": {
                "value": 0,
                "unit": "rem"
              },
              "spread": "{ams.border.width.s}",
              "color": "{ams.color.interactive.invalid.hover}"
            }
          }
        }
      },
      "placeholder": {
        "color": {
          "$value": "{ams.color.text.secondary}",
          "$extensions": {
            "nl.amsterdam.type": "color"
          }
        }
      }
    }
  }
}