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

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

{
  "ams": {
    "date-input": {
      "background-color": { "value": "{ams.inputs.background-color}" },
      "border-color": { "value": "{ams.inputs.border-color}" },
      "border-style": { "value": "{ams.inputs.border-style}" },
      "border-width": { "value": "{ams.inputs.border-width}" },
      "color": { "value": "{ams.inputs.color}" },
      "font-family": { "value": "{ams.inputs.font-family}" },
      "font-size": { "value": "{ams.inputs.font-size}" },
      "font-weight": { "value": "{ams.inputs.font-weight}" },
      "line-height": { "value": "{ams.inputs.line-height}" },
      "outline-offset": { "value": "{ams.inputs.outline-offset}" },
      "padding-block": { "value": "{ams.inputs.padding-block}" },
      "padding-inline": { "value": "{ams.inputs.padding-inline}" },
      "disabled": {
        "color": { "value": "{ams.inputs.disabled.color}" },
        "cursor": { "value": "{ams.cursor.disabled}" },
        "calender-picker-indicator": {
          "background-image": {
            "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
          }
        }
      },
      "hover": {
        "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" },
        "calender-picker-indicator": {
          "background-image": {
            "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
          }
        }
      },
      "invalid": {
        "border-color": { "value": "{ams.inputs.invalid.border-color}" },
        "hover": {
          "border-color": { "value": "{ams.inputs.invalid.hover.border-color}" },
          "box-shadow": { "value": "{ams.inputs.invalid.hover.box-shadow}" }
        }
      },
      "calender-picker-indicator": {
        "background-image": {
          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
        },
        "cursor": { "value": "{ams.cursor.interactive}" }
      }
    }
  }
}