@primer/primitives/tokens/functional/size/viewport.json

Typography, spacing, and color primitives for Primer design system

{
  "<namespace>": {
    "viewportRange": {
      "narrow": {
        "value": "(max-width: calc({<namespace>.breakpoint.medium} - 0.02px))"
      },
      "narrowLandscape": {
        "value": "(max-width: calc({<namespace>.breakpoint.large} - 0.02px) and (max-height: calc({<namespace>.breakpoint.small} - 0.02px)) and (orientation: landscape))"
      },
      "regular": {
        "value": "(min-width: {<namespace>.breakpoint.medium})"
      },
      "wide": {
        "value": "(min-width: {<namespace>.breakpoint.xxlarge})"
      },
      "portrait": {
        "value": "(orientation: portrait)"
      },
      "landscape": {
        "value": "(orientation: landscape)"
      }
    }
  }
}