ogonek-m3

Svelte components and utilities inspired by Material Design 3.

This project borrows heavily from m3-svelte.

Install

npm i @ogonek-education/ogonek-m3

Material Symbols

Use the provider component once near the root of your app to load the baseline icons, and extend it with any extra icons you need.

<script lang="ts">
	import { MaterialSymbolsProvider } from 'ogonek-m3';
</script>

<MaterialSymbolsProvider extraIcons={['search', 'add']} />

Theme CSS (Material Theme Builder)

Material Theme Builder exports a CSS file with a theme selector (e.g. .light { ... }).

Convert:

• Variables from --md- to --color-md-
• Wrap the output in @layer base and [data-theme="..."]

You can then import the resulting .css into your app.css. Add the data-theme attribute to the app.html file to use the newly-created theme. Otherwise the package will resolve to default Google colours.

Components

Almost all components have been implemented. Refer to this list to see how to use them. The semantics and props have been kept same. You can literally type in class="text-md-sys-color-on-error-container" and that will 1:1 corresond to what Google writes. Material Design Components.

Typography

Typography – Material Design 3

• [x] Body
• [x] Title
• [x] Headline
• [x] Display

Navigation

• [x] Navigation
  • [x] Bar
  • [x] Rail
• [x] Tabs
• [x] Menu
• [x] App Bar – the former navbar. needs attention

State

• [x] Progress
• [x] Loading
• [x] Dialog

Information

• [ ] Carousel
• [x] Tooltips
  • [x] rich
  • [x] plain
• [x] List
• [x] Snackbar
• [x] Badge

Input

• [ ] Chips
• [ ] Slider
• [ ] Switch
• [ ] Radio
• [x] Checkbox
• [x] Time Picker
• [x] Date Picker
• [x] Search
• [x] Textfield

Buttons

• [ ] Split Button
• [x] Segmented Button
• [x] Button Group
• [x] Icon Button
• [x] FAB Menu
• [x] Button
• [x] FAB Extended
• [x] FAB

Layout

• [ ] Sheet Bottom
• [ ] Sheet Side
• [x] Toolbars
• [x] Tabs
• [x] Divider
• [x] Card