{
  "subject": "space",
  "title": "Space & Size",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/theming/space/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/theming/space/usage/",
  "use": [],
  "notFor": [],
  "rules": [
    {
      "id": "space/gaps-from-the-scale",
      "rule": "Take every gap from `--ed-space-N`, or from an `ed-gap-N` utility on a layout element. Never write a pixel value that is not on the scale, and nothing below 4px.",
      "check": "error"
    },
    {
      "id": "space/space-for-gaps-size-for-things",
      "rule": "Use `--ed-space-N` for gaps and `--ed-size-N` for the dimensions of things — never `--ed-space-N` for an element's own size, or `--ed-size-N` for a gap.",
      "check": "error"
    },
    {
      "id": "space/space-0-for-flush",
      "rule": "Reserve `--ed-space-0` for elements that are meant to sit flush against each other."
    },
    {
      "id": "space/gap-belongs-to-the-container",
      "rule": "Let `ed-stack` and `ed-cluster` handle spacing, and set the exception with a gap class. Never put a margin on a component to fix a layout, and never create space with empty elements, line breaks or stacked margins.",
      "why": "The gap belongs to the container.",
      "check": "error"
    },
    {
      "id": "space/layout-keeps-its-display",
      "rule": "Never give an element that carries a layout utility — `ed-stack`, `ed-cluster`, `ed-flank`, `ed-grid` or an `ed-gap-N` class — a display other than flex or grid. Hide and show it with the `hidden` attribute, and put a class that has to set another display on an element of its own.",
      "why": "Outside flex and grid the gap no longer applies, and the layout utilities clear their children's margins — the children touch.",
      "check": "error"
    },
    {
      "id": "space/nearer-what-it-belongs-to",
      "rule": "Place an element nearer the thing it belongs to, never equidistant between two neighbors."
    },
    {
      "id": "space/heading-gaps",
      "rule": "Keep the gap below a heading small and the gap above it three to four times larger — never a generous gap between a heading and its content.",
      "why": "A generous gap detaches the heading from what it names.",
      "check": "warning"
    }
  ]
}