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

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

{
  "ams": {
    "dialog": {
      "background-color": { "value": "{ams.color.background}" },
      "border": { "value": "{ams.border.width.m} solid {ams.dialog.background-color}" },
      "gap": { "value": "{ams.space.m}" },
      "inline-size": { "value": "calc(100% - 2 * {ams.space.xl})" },
      "max-block-size": { "value": "calc(100dvh - 2 * {ams.space.xl})" },
      "max-inline-size": { "value": "48rem" },
      "backdrop": {
        "background-color": { "value": "rgb(24 24 24 / 62.5%)" }
      },
      "header": {
        "gap": { "value": "{ams.space.m}" },
        "padding-block": { "value": "{ams.space.xl} 0" },
        "padding-inline": { "value": "{ams.space.2xl}" }
      },
      "body": {
        "padding-block": { "value": "0" },
        "padding-inline": { "value": "{ams.space.2xl}" }
      },
      "footer": {
        "padding-block": { "value": "0 {ams.space.xl}" },
        "padding-inline": { "value": "{ams.space.2xl}" }
      }
    }
  }
}