Breakpoints

The theme package exports a single set of breakpoints so JavaScript logic and CSS media queries stay in sync.

ImportCopy Anchor Link

import { BREAKPOINTS, type Breakpoint } from "@puzzle-ui/theme";

ValuesCopy Anchor Link

Values are numbers in pixels. The Breakpoint type is the union of the keys: "compact" | "tablet" | "desktop" | "hd".

Usage in JavaScriptCopy Anchor Link

import { BREAKPOINTS } from "@puzzle-ui/theme";

const isDesktop = window.matchMedia(
  `(min-width: ${BREAKPOINTS.desktop}px)`,
).matches;

Usage in CSSCopy Anchor Link

The tablet, desktop, and hd breakpoints are also available as design tokens, emitted as --puzzle-breakpoint-tablet, --puzzle-breakpoint-desktop, and --puzzle-breakpoint-hd. Note that CSS custom properties cannot be used inside media query conditions, so media queries should use the pixel values directly; the token variables are useful for layout calculations such as max-width.

.layout {
  max-width: var(--puzzle-breakpoint-desktop);
}

@media (min-width: 768px) {
  .layout {
    padding: var(--puzzle-space-8);
  }
}