Mayflower-tokens provides a bundled up library of design tokens and assets that you will need for theming your front end framework to look and feel like Mass.gov and other Commonwealth web properties that are in Mayflower ecosystem. Mayflower-tokens includes color token SCSS variables, fonts, icons and other imagery from Mayflower — the enterprise design system for the Commonwealth of Massachusetts.
├── dist ├── fonts Texta web fonts ├── images │ ├── svg-icons SVG icon files │ ├── stateseal stateseal png │ ├── stateseal-color stateseal png in color grayscale ├── scss │ ├── _colors.scss Color tokens │ ├── _fonts.scss Texta font imports (needs to set $assets-path) │ ├── _index.scss Default SCSS export
Codebase: Mayflower monorepo
Mayflower monorepo comprised of Mayflower documentation, two component libraries — Mayflower React and Mayflower PatternLab, and their shared assets. Refer to Mayflower PatternLab Static Site for the set of UI components consumed in Mass.gov.
- Live demo: mayflower-react storybook
Using Mayflower-Tokens in Your Project
- Install mayflower-tokens into your project as a dependency.
npm i @massds/mayflower-tokens --save
- Import color tokens into your SASS/SCSS file
@import '[path to node_modules]/@massds/mayflower-tokens/colors/mayflower-color_tokens';
- Refer to variables in
@massds/mayflower-tokens/colors/_mayflower-color_tokens.scssor a live demo for the colors to map the Mayflower color tokens in your theming SCSS.
- You can also find the web fonts Texta that are used in Mayflower (please) To import into your styles, refer to mayflower Texta font imports.
Please note that the fonts and the svg-icons are licensed only for the usage on websites that are owned by the Commonwealth of Massachusetts. Mayflower is currently using a licensed web font Texta and purchased Smashing Icons for some icons.
npm login— Login to the npm account.
To publish the package, you will have to be a collaborator or have access to the @massds/mayflower-tokens npm package.
npm run build— Build the distribution folder
npm publish— Publish
@massds/mayflower-tokensto npm registry.å
Wait a few minutes and check @massds/mayflower-tokens on the registry.