M3 Svelte 6

Variables changed

Instead of rgb(var(--m3-scheme-[color])), use var(--m3c-[color]). Instead of rgb(var(--m3-scheme-[color]) / [transparency]), use --translucent(var(--m3c-[color]), [transparency]). The m3c namespace stores raw colors now.

Instead of --m3-util-{bottom-offset, density, background}, use --m3v-[name]. The m3v namespace is for scoped, varying configuration variables.

Everything else is a token, and now lives under --m3; no util.

--m3-util-rounding-[size] is now --m3-shape-[size]. --m3-util-{curve, curve-accel, curve-decel} are now called --m3-timing-function-{emphasized, emphasized-accel, emphasized-decel}. --m3-{textfield, datefield}-shape are now called --m3-field-shape. And instead of calc(size + var(--m3-util-density-term)), use --m3-density(size).

It's true: some of these features are powered by the Functions and Mixins module. For the 6.0.0 release of M3 Svelte, we've processed the library with vite-plugin-functions-mixins for easy use. But for all releases after, you'll need to install this plugin yourself. You'll benefit from the ability to use M3 Svelte's functions and mixins, to redefine its mixins, and to minify any unused ones.

Tip: Regex find+replace and LLMs help a lot with any tedious refactoring.

Removed components

• CircularProgressIndeterminate and LinearProgressIndeterminate was removed because they looked bad and worked bad. Switch to the modern and clean LoadingIndicator, or if you know how long the operation is supposed to take, try CircularProgressEstimate, LinearProgressEstimate, or WavyLinearProgressEstimate. Your editor should've warned you of this.
• SliderTicks was removed in favor of setting stops in Slider. Your editor should've warned you of this.
• NewSnackbar was renamed to Snackbar.

Changed components

• Dialog now asks you to make use of the native closedby to control closing, and detecting changes to open to detect closing. Your editor should've warned you of this.
• Slider now asks you to use stops, not ticks. Typescript should've warned you of this.
• Icon now displays overflow by default.
• Snackbar now works like NewSnackbar did, where you mount it once in a layout and import snackbar(message) everywhere else. Your editor should've warned you of this.
• NavCMLX and NavCMLXItem now call the largest view extra-large instead of expanded, after the breakpoint.
• NavCMLXItem now requires using onclick for items with a click action.
• Switch now requires your theme to have on-on-primary, a color roughly equivalent to on-primary-container.

Other breaking changes

You now must @import "m3-svelte/misc/[path].css" without wrapping the URL in url().

svelte is now a peerdependency, so you'll need it installed. You'll also need to use the latest version to take advantage of new syntax.

Unless you use Tailwind, the m3-font-[family]-[size] HTML classes are dead. Switch to @apply --m3-[family]-[size] in CSS. Editing attributes is simple: just redefine the mixins.

More info

Recently, tokens were moved to a @layer tokens block, allowing you to change their priority and to use vite-plugin-token-shaker to drop, inline, and rename them. Colors weren't moved, because colors are dynamic (CSS/JS may change them, and Svelte/JS may read them).

If you plan to override --m3 tokens, it's best to do so at the top level to make behavior more predictable. The font and background variable defaults were recently moved to the top level, so it makes sense to put your overrides at the top level.

The bottom offset and density variables were converted to use @property instead of top level fallbacks, as they are literally custom properties with simple default values.