@primer/primitives/dist/docs/functional/size/breakpoints.json

Typography, spacing, and color primitives for Primer design system

{
  "breakpoint-large": {
    "key": "{breakpoint.large}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["size"]
      }
    },
    "filePath": "src/tokens/functional/size/breakpoints.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 1012,
        "unit": "px"
      },
      "$type": "dimension",
      "$extensions": {
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["size"]
        }
      },
      "key": "{breakpoint.large}"
    },
    "name": "breakpoint-large",
    "attributes": {},
    "path": ["breakpoint", "large"],
    "value": "63.25rem",
    "type": "dimension"
  },
  "breakpoint-medium": {
    "key": "{breakpoint.medium}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["size"]
      }
    },
    "filePath": "src/tokens/functional/size/breakpoints.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 768,
        "unit": "px"
      },
      "$type": "dimension",
      "$extensions": {
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["size"]
        }
      },
      "key": "{breakpoint.medium}"
    },
    "name": "breakpoint-medium",
    "attributes": {},
    "path": ["breakpoint", "medium"],
    "value": "48rem",
    "type": "dimension"
  },
  "breakpoint-small": {
    "key": "{breakpoint.small}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["size"]
      }
    },
    "filePath": "src/tokens/functional/size/breakpoints.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 544,
        "unit": "px"
      },
      "$type": "dimension",
      "$extensions": {
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["size"]
        }
      },
      "key": "{breakpoint.small}"
    },
    "name": "breakpoint-small",
    "attributes": {},
    "path": ["breakpoint", "small"],
    "value": "34rem",
    "type": "dimension"
  },
  "breakpoint-xlarge": {
    "key": "{breakpoint.xlarge}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["size"]
      }
    },
    "filePath": "src/tokens/functional/size/breakpoints.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 1280,
        "unit": "px"
      },
      "$type": "dimension",
      "$extensions": {
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["size"]
        }
      },
      "key": "{breakpoint.xlarge}"
    },
    "name": "breakpoint-xlarge",
    "attributes": {},
    "path": ["breakpoint", "xlarge"],
    "value": "80rem",
    "type": "dimension"
  },
  "breakpoint-xsmall": {
    "key": "{breakpoint.xsmall}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["size"]
      }
    },
    "filePath": "src/tokens/functional/size/breakpoints.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 320,
        "unit": "px"
      },
      "$type": "dimension",
      "$extensions": {
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["size"]
        }
      },
      "key": "{breakpoint.xsmall}"
    },
    "name": "breakpoint-xsmall",
    "attributes": {},
    "path": ["breakpoint", "xsmall"],
    "value": "20rem",
    "type": "dimension"
  },
  "breakpoint-xxlarge": {
    "key": "{breakpoint.xxlarge}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["size"]
      }
    },
    "filePath": "src/tokens/functional/size/breakpoints.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 1400,
        "unit": "px"
      },
      "$type": "dimension",
      "$extensions": {
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["size"]
        }
      },
      "key": "{breakpoint.xxlarge}"
    },
    "name": "breakpoint-xxlarge",
    "attributes": {},
    "path": ["breakpoint", "xxlarge"],
    "value": "87.5rem",
    "type": "dimension"
  }
}