This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 1,000,000+ packages pre-installed, including
@massds/mayflower-tokens with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
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
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.
npm i @massds/mayflower-tokens --save
@import '[path to node_modules]/@massds/mayflower-tokens/colors/mayflower-color_tokens';
@massds/mayflower-tokens/colors/_mayflower-color_tokens.scssor a live demo for the colors to map the Mayflower color tokens in your theming SCSS.
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
version in package.json.
npm publish — Publish
@massds/mayflower-tokens to npm registry.å
Wait a few minutes and check @massds/mayflower-tokens on the registry.