M3 Svelte 7

M3 Svelte 7 isn't a complete reorganizing like M3 Svelte 6 was. We have incremental improvements though:

You need to update your CSS

A good start is to regenerate your theme. This takes care of using the new etc entry point folder, dropping deprecated colors and deprecated workarounds, and adding a --m3-density(). There are a few other things you need to do:

• Replace --m3c-background with --m3c-surface, and --m3c-on-background with --m3c-on-surface everywhere.
• If you were using the default font, Roboto, you'll need to update your Google Fonts embed to download Google Sans Flex instead.

Saner syntax for buttons, layers, and focus

If you were using a button linked to an input - that is, a toggle or connected button - you need to update your code from this pattern:

<input type="checkbox" id="goofy-mode" bind:checked={goofyMode} />
<Button for="goofy-mode" square>Goofy mode</Button>

To this pattern:

<Button square label>
  <input type="checkbox" bind:checked={goofyMode} />
  Goofy mode
</Button>

If you were using layers, you need to update your code from this pattern:

<button>
  <Layer />
  Hello
</button>
<style>
  button {
    position: relative;
  }
</style>

To this pattern:

<button class="m3-layer">
  Hello
</button>

Focus styles have been moved into the main stylesheet, but as the base layer; move any other CSS resets you have to the base layer. They were also refactored to use mixins; replace the classes focus-inset and focus-none with the styles @apply --m3-focus-inward and @apply --m3-focus-none.

Minute things

Colors have been updated a lot:

• No longer exported from default entrypoint. If you want to use them, you will need to install @ktibow/material-color-utilities-nightly and switch your entrypoint to m3-svelte/etc/colors.
• pairs is gone, vendor it if you were using it
• colors now excludes the deprecated background roles
• genCSS now expects a third argument with a list of colors to use

parseSize is gone, vendor it if you were using it.

Most components now check for truthiness instead of whether the prop exists at all when deciding between states. This means you can't do href={undefined} to make a fake link, but there's no reason you would want to do that. It also means you can do onclick={loaded ? run : undefined} without getting TS errors or having to make two separate branches, one with onclick and one without.

The upshot

Converting from Layer to m3-layer, plus using inputs inside labels, led to decreasing the demo's HTML size by 8.75 kB.

Switching to Google Sans Flex (a font with optical sizing) led to decreasing the demo's CSS size by 11.82 kB.

Switching to Sans Flex, and other recent optimizations (like converting colors to tokens, switching to light-dark(), and using a specialized --m3-density()), decreased a barebones setup's CSS size by 5.29 kB. A token shaked barebones setup (rendering one Button) is now 7.09 kB, or just 1.78 kB compressed.

There's more to do: I'm planning to start using CSS Modules soon, which I hope will bring the size of a M3 Svelte button reasonably close to a manually created one.