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

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

{
  "ams": {
    "links": {
      "$description": "Shared base styles for all link-like components.",
      "color": {
        "$value": "{ams.color.interactive.default}",
        "$extensions": {
          "nl.amsterdam.type": "color"
        }
      },
      "text-decoration-thickness": {
        "$value": {
          "value": 0.125,
          "unit": "rem"
        },
        "$type": "dimension",
        "$extensions": {
          "nl.amsterdam.hint": "2px",
          "nl.amsterdam.subtype": "space"
        }
      },
      "text-underline-offset": {
        "$value": {
          "value": 0.15625,
          "unit": "rem"
        },
        "$type": "dimension",
        "$extensions": {
          "nl.amsterdam.hint": "2.5px",
          "nl.amsterdam.subtype": "space"
        }
      },
      "hover": {
        "$description": "On hover the underline thickens and moves closer to the text.",
        "color": {
          "$value": "{ams.color.interactive.hover}",
          "$extensions": {
            "nl.amsterdam.type": "color"
          }
        },
        "text-decoration-thickness": {
          "$value": {
            "value": 0.1875,
            "unit": "rem"
          },
          "$type": "dimension",
          "$extensions": {
            "nl.amsterdam.hint": "3px",
            "nl.amsterdam.subtype": "space"
          }
        },
        "text-underline-offset": {
          "$value": {
            "value": 0.09375,
            "unit": "rem"
          },
          "$type": "dimension",
          "$extensions": {
            "nl.amsterdam.hint": "1.5px",
            "nl.amsterdam.subtype": "space"
          }
        }
      },
      "subtle": {
        "$description": "For links that are already recognisable from context, e.g. in navigation menus. No underline by default; underline appears on hover.",
        "text-decoration-line": {
          "$value": "none",
          "$extensions": {
            "nl.amsterdam.type": "textDecorationLine"
          }
        },
        "hover": {
          "text-decoration-line": {
            "$value": "underline",
            "$extensions": {
              "nl.amsterdam.type": "textDecorationLine"
            }
          }
        }
      },
      "contrast": {
        "$description": "For links on coloured backgrounds where the default blue lacks sufficient contrast.",
        "color": {
          "$value": "{ams.color.interactive.contrast}",
          "$extensions": {
            "nl.amsterdam.type": "color"
          }
        },
        "hover": {
          "color": {
            "$value": "{ams.color.interactive.contrast}",
            "$extensions": {
              "nl.amsterdam.type": "color"
            }
          }
        }
      },
      "inverse": {
        "$description": "For links on dark backgrounds.",
        "color": {
          "$value": "{ams.color.interactive.inverse}",
          "$extensions": {
            "nl.amsterdam.type": "color"
          }
        },
        "hover": {
          "color": {
            "$value": "{ams.color.interactive.inverse}",
            "$extensions": {
              "nl.amsterdam.type": "color"
            }
          }
        }
      }
    }
  }
}