@amsterdam/design-system-tokens/src/components/ams/search-field.tokens.json

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

{
  "ams": {
    "search-field": {
      "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"
          }
        },
        "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"
              }
            }
          }
        },
        "cancel-button": {
          "background-image": {
            "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")",
            "$extensions": {
              "nl.amsterdam.type": "backgroundImage"
            }
          },
          "block-size": {
            "$value": "{ams.typography.body-text.font-size}",
            "$extensions": {
              "nl.amsterdam.type": "dimension"
            }
          },
          "color": {
            "$value": "{ams.color.interactive.default}",
            "$extensions": {
              "nl.amsterdam.type": "color"
            }
          },
          "cursor": {
            "$value": "{ams.cursor.interactive}",
            "$extensions": {
              "nl.amsterdam.type": "cursor"
            }
          },
          "inline-size": {
            "$value": "{ams.typography.body-text.font-size}",
            "$extensions": {
              "nl.amsterdam.type": "dimension"
            }
          }
        },
        "placeholder": {
          "color": {
            "$value": "{ams.inputs.placeholder.color}",
            "$extensions": {
              "nl.amsterdam.type": "color"
            }
          }
        }
      }
    }
  }
}