Matchbox 7.0.0

For more detailed release notes, please visit the Matchbox repository on Github.

New CSS Library

Matchbox now includes utility-first CSS framework for rapidly building UIs. Read more about it here.

Create React App & Next.js Templates

Matchbox now includes Create React App and Next.js templates to set up new projects quickly. These templates install Matchbox, all of its peer dependencies, Typescript, and Calibre.

To create a new Next.js app:

npx create-next-app --example https://github.com/SparkPost/matchbox/tree/main/packages/next-template-matchbox

To create a new CRA app:

npx create-react-app --template @sparkpost/matchbox my-app

Design Token Rearchitechture

Design tokens have been rebuilt from the ground up with Style Dictionary. This update does not include any breaking changes, and tokens will continue to function as they did previously.

However, design token keys will be changing in the future. At the moment, keys use a mix of camel and snake case. In the future, they will be all snake cased. These new keys are available for use right now by importing tokens_next from @sparkpost/design-tokens.

Other Changes and Fixes

• Page's breadcrumbAction prop has been depcrecated.
• A new z-index token has been added – "above" with a value of "10".
• White Buttons now use the correct font color.
• Box and Text no longer pass system props to the DOM.
• Buttton's loading prop is no longer passed to the DOM.
• Various Typescript bugs have been identified and fixed.