V3.2 Upgrade Guide
Framework 3.2 is fully backward compatible with 3.0 and 3.1. Existing class names render unchanged, and every 3.2 feature (themes, the paint API, adaptive charts, adaptive icons) is opt-in. This guide lists the few things worth reviewing when you upgrade.
From Framework 3.0 or 3.1
Upgrade and rerender: your plugin looks the same until you opt into 3.2 features. Two things are worth reviewing.
- Numbered border levels are deprecated:
border--h-1throughborder--h-7(and vertical counterparts) still render, but will be removed in Framework 4.0. Prefer the shade-step rail (border--h-10toborder--h-75) in new markup. See Border Border Apply border patterns that create the illusion of different border intensities Draw a horizontal or vertical rule on any element with the border--h and border--v utilities, named on the same 10 to 75 shade scale as backgrounds. On 1-bit displays a step renders as a dither pattern of black and white pixels, so a rule can read as gray. 4-bit and full-color screens draw all 14 steps; the other rails pair them onto seven levels. . - Themed screens ignore dark mode: if you add a
screen--theme-<id>class,screen--dark-modeno longer applies. A theme is a complete color statement. See Themes Themes Opt-in stylesheets that re-theme screens while preserving device-capability rendering Themes are standalone stylesheets that re-point semantic channels, component slots, and utility tokens at different palette tokens. A themed screen still renders through its device mode: dither patterns on 1-bit, palette images on limited color, solids on full color. .
From Framework v2
v3 is structurally backward compatible with v2: your class names still compile and render. One visual change needs review: v3 rebuilt the 1bit grayscale dither patterns on a 14-step linear scale, so most shade names produce different lightness values than they did in v2.
The full shade-by-shade migration table lives in the Framework 3.1 upgrade guide. It lists each shade's v2 and v3 lightness and which v3 shade restores the original look.
Verifying the Upgrade
Use the Raw / Preview toggle in Device Preview to compare full-bright token values against panel-accurate output. To check theme behavior, pick a Style in the screen picker and confirm your plugin stays legible under each theme.
Next Steps
Head to the V3.2 Enhancement Guide V3.2 Enhancement Guide Make your plugin theme-ready and adopt adaptive charts, icons, and JS paint Framework 3.2 lets an existing plugin follow themes, dark mode, and device modes everywhere: in markup, in charts, in icons, and in text and image outlines. This guide walks through each enhancement you can adopt (theme readiness, adaptive charts, adaptive icons, JS paint, the border step rail, and legible overlaid text and images), one at a time and in any order. to make your plugin theme-ready and to adopt adaptive charts and icons.