Breakpoints and accessibility

resolveThemeBreakpoints merges project overrides with defaults and always returns numeric sm, md, and lg values. UI packages can use the same result for component props, generated CSS variables, and stylesheet media-query helpers.

tsimport { resolveThemeBreakpoints } from "@tavojs/ui-core";

const breakpoints = resolveThemeBreakpoints({
  color: { light: { primary: "#116a67" } },
  breakpoints: { md: 820 }
});

// { sm: 480, md: 820, lg: 1024 }

Breakpoints decide when a layout switches. Viewport configuration describes fluid root-size scaling between minimum and maximum widths. Resolve it separately when a renderer needs to generate clamp-based typography or size behavior.

tsimport { resolveThemeViewport } from "@tavojs/ui-core";

const viewport = resolveThemeViewport({
  color: { light: { primary: "#116a67" } },
  viewport: { rootMin: 14, rootMax: 16, minWidth: 320, maxWidth: 960 }
});

Set accessibility.contrast to AA or AAA to evaluate important foreground and background pairs during generation. Warnings stay in the result by default so design tooling can display them alongside the affected theme.

tsconst review = buildThemeTokens({
  color: { light: { primary: "#777777" } },
  accessibility: { contrast: "AAA", failOnViolation: false }
});

if (review.warnings.length) console.warn(review.warnings);