Breakpoints and accessibility

resolveThemeBreakpoints merges project overrides with defaults and always returns numeric sm, md, and lg values. Custom renderers can use these values when generating their responsive rules. The published @tavojs/ui web components and sx runtime keep their compiled 480/768/1024px thresholds; changing this config does not rebuild them.

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 selects fixed, fluid, or stepped root sizing. No viewport object resolves to fixed 16px; an object without strategy retains fluid defaults for compatibility. Set strategy explicitly, then let your renderer translate the result into its own sizing rules.

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

const viewport = resolveThemeViewport({
  color: { light: { primary: "#116a67" } },
  viewport: { strategy: "fluid", 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.

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

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

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