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

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

{
  "ams": {
    "alert": {
      "background-color": { "value": "{ams.color.background}" },
      "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.feedback.info}" },
      "forced-colors": {
        "border-width": { "value": "{ams.border.width.xl}" }
      },
      "severity-indicator": {
        "background-color": { "value": "{ams.color.feedback.info}" },
        "padding-block": { "value": "{ams.space.m}" },
        "padding-inline": { "value": "{ams.space.xs}" }
      },
      "content": {
        "gap": { "value": "{ams.space.s}" },
        "padding-block": { "value": "{ams.space.m}" },
        "padding-inline": { "value": "{ams.space.m}" }
      },
      "error": {
        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.feedback.error}" },
        "severity-indicator": {
          "background-color": { "value": "{ams.color.feedback.error}" }
        }
      },
      "success": {
        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.feedback.success}" },
        "severity-indicator": {
          "background-color": { "value": "{ams.color.feedback.success}" }
        }
      },
      "warning": {
        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.feedback.warning}" },
        "severity-indicator": {
          "background-color": { "value": "{ams.color.feedback.warning}" }
        }
      }
    }
  }
}