Style changes in new Material Design guidelines



Google just unveiled the next stage for Material Design and updated its stylistic guidelines. Some of the changes may require changes to daemonite-material in order to stay up to date. These changes will be listed here as a ship list for a future release (probably v4.2).

New Material guidelines vs previous guidelines.

General changes

  • Increase default border radius from 2px to 4px
  • Update default danger, success and warning colours
  • Update typography

Individual component changes

  • Check new specs for the following components:
  • App bars (.navbar)
  • Buttons (.btn)
  • Cards (.card)
  • Chips (.chip)
  • Data tables (.table)
  • Dialogs (.modal)
  • Lists (.list-group and .expansion-panel)
  • Menus (.dropdown-menu and .menu)
  • Navigation drawers (.navdrawer)
  • Progress indicators (.progress)
  • Selection controls (.custom-control)
  • Sliders (.custom-range)
  • Snackbars (.snackbar)
  • Tabs (.nav-tabs)
  • Text fields (.form-control)
  • Tooltips (.tooltip)

App bars (bottom and top)

  • Dense app bar
  • Extended app bar
  • Is inset FAB easy to implement?


  • New component (banner probably can translate to Bootstrap’s .jumbotron)


  • Outlined button

Buttons: floating action button

  • Extended FAB


  • Outlined chip
  • States (i.e. .chip-danger, .chip-success, .chip-warning, etc.)


  • Scrolling dialog

Navigation drawers

  • Bottom drawer

Progress indicators

  • Determinate circular progress indicator

Text fields

  • Outlined text field

This list is not complete yet.