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

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

{
  "ams": {
    "select": {
      "background-color": {
        "$value": "{ams.inputs.background-color}",
        "$extensions": {
          "nl.amsterdam.type": "color"
        }
      },
      "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='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")",
        "$extensions": {
          "nl.amsterdam.type": "backgroundImage"
        }
      },
      "background-position": {
        "$value": "right {ams.space.m} center",
        "$extensions": {
          "nl.amsterdam.type": "backgroundPosition"
        }
      },
      "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} calc(2 * {ams.inputs.padding-inline} + 1em)",
        "$extensions": {
          "nl.amsterdam.subtype": "space",
          "nl.amsterdam.type": "dimension"
        }
      },
      "disabled": {
        "background-image": {
          "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")",
          "$extensions": {
            "nl.amsterdam.type": "backgroundImage"
          }
        },
        "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"
          }
        },
        "background-image": {
          "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23003677' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")",
          "$extensions": {
            "nl.amsterdam.type": "backgroundImage"
          }
        }
      },
      "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"
            }
          }
        }
      },
      "option": {
        "disabled": {
          "color": {
            "$value": "{ams.color.interactive.disabled}",
            "$extensions": {
              "nl.amsterdam.type": "color"
            }
          }
        }
      }
    }
  }
}