@amsterdam/design-system-tokens/src/components/ams/password-input.tokens.json

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

{
  "ams": {
    "password-input": {
      "background-color": {
        "$value": "{ams.inputs.background-color}",
        "$extensions": {
          "nl.amsterdam.type": "color"
        }
      },
      "border-color": {
        "$value": "{ams.inputs.border-color}",
        "$extensions": {
          "nl.amsterdam.type": "color"
        }
      },
      "border-style": {
        "$value": "{ams.inputs.border-style}",
        "$extensions": {
          "nl.amsterdam.type": "borderStyle"
        }
      },
      "border-width": {
        "$value": "{ams.inputs.border-width}",
        "$extensions": {
          "nl.amsterdam.type": "borderWidth"
        }
      },
      "color": {
        "$value": "{ams.inputs.color}",
        "$extensions": {
          "nl.amsterdam.type": "color"
        }
      },
      "font-family": {
        "$value": "{ams.inputs.font-family}",
        "$extensions": {
          "nl.amsterdam.type": "fontFamily"
        }
      },
      "font-size": {
        "$value": "{ams.inputs.font-size}",
        "$extensions": {
          "nl.amsterdam.type": "fontSize"
        }
      },
      "font-weight": {
        "$value": "{ams.inputs.font-weight}",
        "$extensions": {
          "nl.amsterdam.type": "fontWeight"
        }
      },
      "line-height": {
        "$value": "{ams.inputs.line-height}",
        "$extensions": {
          "nl.amsterdam.subtype": "lineHeight",
          "nl.amsterdam.type": "number"
        }
      },
      "outline-offset": {
        "$value": "{ams.inputs.outline-offset}",
        "$extensions": {
          "nl.amsterdam.subtype": "space",
          "nl.amsterdam.type": "dimension"
        }
      },
      "padding-block": {
        "$value": "{ams.inputs.padding-block}",
        "$extensions": {
          "nl.amsterdam.subtype": "space",
          "nl.amsterdam.type": "dimension"
        }
      },
      "padding-inline": {
        "$value": "{ams.inputs.padding-inline}",
        "$extensions": {
          "nl.amsterdam.subtype": "space",
          "nl.amsterdam.type": "dimension"
        }
      },
      "disabled": {
        "color": {
          "$value": "{ams.inputs.disabled.color}",
          "$extensions": {
            "nl.amsterdam.type": "color"
          }
        },
        "cursor": {
          "$value": "{ams.cursor.disabled}",
          "$extensions": {
            "nl.amsterdam.type": "cursor"
          }
        }
      },
      "hover": {
        "box-shadow": {
          "$value": "{ams.inputs.hover.box-shadow}",
          "$extensions": {
            "nl.amsterdam.type": "shadow"
          }
        }
      },
      "invalid": {
        "border-color": {
          "$value": "{ams.inputs.invalid.border-color}",
          "$extensions": {
            "nl.amsterdam.type": "color"
          }
        },
        "hover": {
          "border-color": {
            "$value": "{ams.inputs.invalid.hover.border-color}",
            "$extensions": {
              "nl.amsterdam.type": "color"
            }
          },
          "box-shadow": {
            "$value": "{ams.inputs.invalid.hover.box-shadow}",
            "$extensions": {
              "nl.amsterdam.type": "shadow"
            }
          }
        }
      },
      "placeholder": {
        "color": {
          "$value": "{ams.inputs.placeholder.color}",
          "$extensions": {
            "nl.amsterdam.type": "color"
          }
        }
      }
    }
  }
}