v12.0.0

Migration Tips

• Find and replace mzp-t-narrow with mzp-t-content-md on content containers (mzp-l-content).
• Content width tokens have changed slightly, which could impact page layout. See https://github.com/mozilla/protocol-tokens/pull/81/files
• Styled form inputs now include bottom spacing. If you have added this spacing to your forms in another way (for example, wrapping them in paragraph tags) you could end up with double spacing.
• Find and replace mzp-t-small to mzp-t-md on buttons.
• The value of $layout-2xl has increased.
• The new select box styles include the down arrow as a background image. If you have declared a background or background-image for selects locally, you should remove it.
• Add mzp-t-dark to <form class="mzp-c-language-switcher"> (or to any other parent element) to get a brighter focus ring on the language select box.

Features

• css: (breaking) Document content container and add width theme classes (#505)
• css: Add button container and alignment options (#580)
• css: Update form spacing and add form layout components (#508)
• css: Add form dark theme (#508)
• css: Add styled checkboxes and radio buttons (#439)
• tokens: update @mozilla-protocol/tokens to 5.0.5
• css: Tweak form error styles (#508)
• css: (breaking) Add styled text inputs (#430)
• css: Button style updates. (#429)
• css: Add styled select drop downs (#435)

Bug Fixes

• node: Update gulp-sass to v4.1.0 (#598)
• css: Fix relative imports in protocol-extra.scss (#597)
• css: Fix bug with new select box and footer language select (#584)
• css: Switch to negative text indent for image replacement (#519)
• css: Embiggen the modal close button (#557)
• css: Center the notification bar in larger viewports
• css: Button line-height bug fix
• css: Code cleanup in reset.scss & forms.scss