Upgrade Guide

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 Border Apply border patterns that create the illusion of different border intensities The Border system creates the illusion of grayscale borders through carefully designed dither patterns. When rendered on 1-bit displays, these patterns create varying border intensities using alternating black and white pixels. 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.

• Bit‑depth variants: add 2bit: and 4bit: prefixes to enhance richer devices.
• Orientation variants: use portrait: and landscape: without branching markup.
• Responsive breakpoints: sm, md, lg, xl.
• Automatic bit‑depth adaptation for Background Background Grayscale dithered patterns optimized for 1-bit rendering The Background system creates the illusion of grayscale through carefully designed dither patterns. When rendered on 1-bit (black and white only) displays, these patterns create an illusion of different shades of gray by using specific arrangements of black and white pixels. , Border Border Apply border patterns that create the illusion of different border intensities The Border system creates the illusion of grayscale borders through carefully designed dither patterns. When rendered on 1-bit displays, these patterns create varying border intensities using alternating black and white pixels. , and Text Text Control text color, alignment and formatting The Text Color system creates the illusion of grayscale text through carefully designed dither patterns. When rendered on 1-bit (black and white only) displays, these patterns create an illusion of different shades of gray by using specific arrangements of black and white pixels. .

For a deeper dive into enhancement options, see the Enhancement Guide Enhancement Guide How to enhance your plugins with device-aware, bit-depth-aware, and orientation-responsive patterns This guide explains how to enhance plugins with Framework v2.0’s expanded responsive capabilities. For a quick migration checklist, see the Upgrade Guide. .

• Legacy background tokens (`gray-1..7`) still render; prefer the expanded palette (`gray-10..75`) going forward.
• Overflow Overflow Overflow Handle column items overflow The Overflow engine automatically lays out items into up to N columns and adds an “and X more” label when content exceeds the available height. It also applies text clamping per-column width and handles grouped headers without leaving orphaned headings. : 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 .column or .list. The runtime promotes them to the enclosing .columns Columns Columns Implement zero-config column layouts for content organization The Columns system provides a simple way to create balanced column layouts that look great on the device. For more complex layouts, you can combine it with the Grid system or use either system independently. container.
• Overflow: when only data-list-limit is present, the engine defaults to a single column. Suppress the trailing label with data-list-hidden-count="false".