@utrecht/components/alert/src/tokens.json

Components for the Municipality of Utrecht based on the NL Design System architecture

{
  "utrecht": {
    "alert": {
      "background-color": {
        "$extensions": {
          "nl.nldesignsystem.css.property": {
            "syntax": "<color>",
            "inherits": true
          },
          "nl.nldesignsystem.figma.supports-token": true
        },
        "type": "color"
      },
      "border-color": {
        "$extensions": {
          "nl.nldesignsystem.css.property": {
            "syntax": "<color>",
            "inherits": true
          },
          "nl.nldesignsystem.figma.supports-token": true
        },
        "type": "color"
      },
      "border-radius": {
        "$extensions": {
          "nl.nldesignsystem.css.property": {
            "syntax": "<length-percentage>",
            "inherits": true
          },
          "nl.nldesignsystem.figma.supports-token": true
        },
        "type": "borderRadius"
      },
      "border-width": {
        "$extensions": {
          "nl.nldesignsystem.css.property": {
            "syntax": "<length>",
            "inherits": true
          },
          "nl.nldesignsystem.figma.supports-token": true
        },
        "type": "borderWidth"
      },
      "color": {
        "$extensions": {
          "nl.nldesignsystem.css.property": {
            "syntax": "<color>",
            "inherits": true
          },
          "nl.nldesignsystem.figma.supports-token": true
        },
        "type": "color"
      },
      "column-gap": {
        "$extensions": {
          "nl.nldesignsystem.css.property": {
            "syntax": "<length>",
            "inherits": true
          },
          "nl.nldesignsystem.figma.supports-token": true
        },
        "type": "spacing"
      },
      "padding-block-start": {
        "$extensions": {
          "nl.nldesignsystem.css.property": {
            "syntax": "<length>",
            "inherits": true
          },
          "nl.nldesignsystem.figma.supports-token": true
        },
        "type": "spacing"
      },
      "padding-block-end": {
        "$extensions": {
          "nl.nldesignsystem.css.property": {
            "syntax": "<length>",
            "inherits": true
          },
          "nl.nldesignsystem.figma.supports-token": true
        },
        "type": "spacing"
      },
      "padding-inline-start": {
        "$extensions": {
          "nl.nldesignsystem.css.property": {
            "syntax": "<length>",
            "inherits": true
          },
          "nl.nldesignsystem.figma.supports-token": true
        },
        "type": "spacing"
      },
      "padding-inline-end": {
        "$extensions": {
          "nl.nldesignsystem.css.property": {
            "syntax": "<length>",
            "inherits": true
          },
          "nl.nldesignsystem.figma.supports-token": true
        },
        "type": "spacing"
      },
      "margin-block-start": {
        "$extensions": {
          "nl.nldesignsystem.css.property": {
            "syntax": "<length>",
            "inherits": true
          },
          "nl.nldesignsystem.figma.supports-token": false
        },
        "type": "spacing"
      },
      "margin-block-end": {
        "$extensions": {
          "nl.nldesignsystem.css.property": {
            "syntax": "<length>",
            "inherits": true
          },
          "nl.nldesignsystem.figma.supports-token": false
        },
        "type": "spacing"
      },
      "message": {
        "row-gap": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<length>",
              "inherits": true
            },
            "nl.nldesignsystem.figma.supports-token": false
          },
          "type": "spacing"
        }
      },
      "content": {
        "row-gap": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<length>",
              "inherits": true
            },
            "nl.nldesignsystem.figma.supports-token": false
          },
          "type": "spacing"
        }
      },
      "info": {
        "background-color": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<color>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.background-color"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "color": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<color>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.color"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "border-color": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<color>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.border-color"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "border-width": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<length>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.border-width"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "borderWidth"
        }
      },
      "warning": {
        "background-color": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<color>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.background-color"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "color": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<color>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.color"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "border-color": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<color>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.border-color"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "border-width": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<length>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.border-width"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "borderWidth"
        }
      },
      "error": {
        "background-color": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<color>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.background-color"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "color": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<color>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.color"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "border-color": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<color>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.border-color"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "border-width": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<length>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.border-width"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "borderWidth"
        }
      },
      "ok": {
        "background-color": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<color>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.background-color"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "color": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<color>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.color"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "border-color": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<color>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.border-color"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "border-width": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<length>",
              "inherits": true
            },
            "nl.nldesignsystem.fallback": ["utrecht.alert.border-width"],
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "borderWidth"
        }
      },
      "icon": {
        "color": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<color>",
              "inherits": true
            },
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "size": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<length>",
              "inherits": true
            },
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "sizing"
        },
        "inset-block-start": {
          "$extensions": {
            "nl.nldesignsystem.css.property": {
              "syntax": "<length>",
              "inherits": true
            },
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "spacing"
        },
        "info": {
          "color": {
            "$extensions": {
              "nl.nldesignsystem.css.property": {
                "syntax": "<color>",
                "inherits": true
              },
              "nl.nldesignsystem.fallback": ["utrecht.alert.icon.color"]
            },
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "error": {
          "color": {
            "$extensions": {
              "nl.nldesignsystem.css.property": {
                "syntax": "<color>",
                "inherits": true
              },
              "nl.nldesignsystem.fallback": ["utrecht.alert.icon.color"]
            },
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "warning": {
          "color": {
            "$extensions": {
              "nl.nldesignsystem.css.property": {
                "syntax": "<color>",
                "inherits": true
              },
              "nl.nldesignsystem.fallback": ["utrecht.alert.icon.color"]
            },
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        },
        "ok": {
          "color": {
            "$extensions": {
              "nl.nldesignsystem.css.property": {
                "syntax": "<color>",
                "inherits": true
              },
              "nl.nldesignsystem.fallback": ["utrecht.alert.icon.color"]
            },
            "nl.nldesignsystem.figma.supports-token": true
          },
          "type": "color"
        }
      }
    }
  }
}