The orbit-components package contains several media queries that are based on a mobile-first approach.

The breakpoints are part of the theme and have the following values:

We export an enum QUERIES and an object TOKEN that can help with the usage of our tokens.

The QUERIES enum contains all the breakpoints.

export enum QUERIES {
  MEDIUMMOBILE = "mediumMobile",
  LARGEMOBILE = "largeMobile",
  TABLET = "tablet",
  DESKTOP = "desktop",
  LARGEDESKTOP = "largeDesktop",
}

The TOKEN object contains the breakpoints as keys, associated with the corresponding name of the token as value.

export const TOKEN = {
  mediumMobile: "widthBreakpointMediumMobile",
  largeMobile: "widthBreakpointLargeMobile",
  tablet: "widthBreakpointTablet",
  desktop: "widthBreakpointDesktop",
  largeDesktop: "widthBreakpointLargeDesktop",
} as const;

In case you need to access the value of the breakpoint (for testing purposes, for instance) you can use the getBreakpointWidth function.

This function can also be used to return formatted strings useful for event listeners, for example.

getBreakpointWidth(breakpoint: keyof typeof TOKEN, theme: Theme, pure?: boolean) => string | number