Reference Guide

WIP: currently undergoing some work on this...

Colour

The following Material colour roles are accessible through the CSS variables var(--md-sys-color-*):

M3 Colour Roles

TODO: extension with online,idle,focus,busy,invisible

Breakpoints

Display breakpoints are provided as var(--breakpoints-sm|md|lg|xl)

Roundness

Border radius values are provided as var(--borderRadius-sm|md|lg|xl|xxl|full)

Gaps

Gap values are provided as var(--gap-none|xxs|xs|s|sm|md|lg|x|xl|xxl)

Fonts

Font values are provided by:

  • Primary: var(--fonts-primary)
  • Monospace: var(--fonts-monospace)

Typography

Typography tokens are currently fixed.

Transitions

Two transition speeds are specified (in format, <time> <easing>):

  • Fast: var(--transitions-fast)
  • Medium: var(--transitions-medium)

Misc.

... missing effects, layout