@massds/mayflower-tokens

Mayflower-Tokens

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 assets subdirectory

  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

1. Install mayflower-tokens into your project as a dependency. npm i @massds/mayflower-tokens --save
2. Import color tokens into your SASS/SCSS file @import '[path to node_modules]/@massds/mayflower-tokens/colors/mayflower-color_tokens';
3. Refer to variables in @massds/mayflower-tokens/colors/_mayflower-color_tokens.scss or a live demo for the colors to map the Mayflower color tokens in your theming SCSS.
4. 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.

License

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.

Texta License

Fontspring grants Licensee a perpetual, worldwide, non-exclusive and non-transferrable license to install the Texta as webfont on Websites that are owned by the Commonwealth of Massachusetts using the @font-face selector in CSS files. For other usage, you may have to acquire an additional license through Fontsprint. For more details about Texta's terms of use, please refer to our web font license.

Publish Package

1. 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.

1. npm run build — Build the distribution folder dist.

2. Update version in package.json.

3. npm publish — Publish @massds/mayflower-tokens to npm registry.å

4. Wait a few minutes and check @massds/mayflower-tokens on the registry.