Nutritious Pomegranate Muffins
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@massds/mayflower-tokens

9.53.1 • Public • Published

Mayflower-Tokens

npm package

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

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.

Install

npm i @massds/mayflower-tokens

DownloadsWeekly Downloads

22

Version

9.53.1

License

MIT

Unpacked Size

4.16 MB

Total Files

151

Last publish

Collaborators

  • avatar