FIRSTTeam102 / m3-svelte

An attempt to make Material 3 in Svelte.

m3-svelte

An attempt to make Material 3 in Svelte. See the website for docs.

Getting started

1. Install the library into a Svelte project (e.g. npm install m3-svelte)
2. Use the theme creator to construct your theme. This is needed for components to function, as it gives some base styling, and your theme's colors. Drop the component in +layout.svelte and import it.
3. Set up your typography. You can customize it with CSS variables or just import Roboto. The CSS variables used for font styles are:
   • font-family: --md-sys-typescale-body
   • font-weight: --md-sys-typescale-body-weight
4. Set up your body defaults, such as foreground/background and default fonts. You can optionally use the classes md-body-large, md-body-medium, or md-body-small depending on the desired root font size.
5. That's all; import components as needed!

Example +page.svelte:

<script>
	import { Card, Button } from 'm3-svelte';
</script>

<Card type='filled'>
	Hello world
</Card>

<Button type='filled'>Press me</Button>