Upgrade Guide
This short guide helps you upgrade from Framework v1 to v2. The new framework stays backward compatible, with the exception of the Border utility.
Deprecation notice: Border utility
The Border utility was redesigned to render a full‑spectrum grayscale on any surface shade. The markup stays the same, but the visual output changes. See the Border docs for details and examples.
- New scale:
1= black …7= white; works on light and dark backgrounds. - Previously (v1), borders only produced a faux grayscale on white surfaces and appeared solid black (invisible) on black surfaces.
- How to upgrade: keep your markup (
border--h-{n},border--v-{n}), then re‑evaluate{n}values on both light and dark surfaces.
What’s new you can adopt immediately
- Bit‑depth variants: add
2bit:and4bit:prefixes to enhance richer devices. - Orientation variants: use
portrait:andlandscape:without branching markup. - Responsive breakpoints:
sm,md,lg,xl. - Automatic bit‑depth adaptation for Background, Border, and Text.
For a deeper dive into enhancement options, see the Enhancement Guide.
Compatibility notes
- Legacy background tokens (`gray-1..7`) still render; prefer the expanded palette (`gray-10..75`) going forward.
- Overflow: legacy list attributes (
data-list-limit,data-list-max-height,data-list-hidden-count,data-list-max-columns) continue to work when placed on a descendant.columnor.list. The runtime promotes them to the enclosing.columnscontainer. - Overflow: when only
data-list-limitis present, the engine defaults to a single column. Suppress the trailing label withdata-list-hidden-count="false".