Mink Build Tokens

A central location to store shared attributes of the Minkminks-ui. These attributes include: colors, fonts, spacing, and more. Using Amazon's Style Dictionary we transform attributes into usable variables for a variety of platforms.

Usage

Install The package in your project

npm i @minkminks/build-tokens

or

yarn add @minkminks/build-tokens

Import tokens into your project based on your requirements

Ideally you'd want to import them into a file that exposes them to your entire application.

SASS Variables imported into a .scss file

@import '~@minkminks/build-tokens/scss/tokens.scss'

CSS Variables imported into a .css file

@import '~@minkminks/build-tokens/css/tokens.css'

SASS Utility classes imported into a .scss file (NOTE: SCSS and CSS utility classes are the same, we provide both if you wish to maintain consistency in file formats)

@import '~@minkminks/build-tokens/utilities/utilities-color.scss'
@import '~@minkminks/build-tokens/utilities/utilities-size.scss'

CSS Utility Classes imported into a .css file

@import '~@minkminks/build-tokens/utilities/utilities-color.css'
@import '~@minkminks/build-tokens/utilities/utilities-size.css'

Available Tokens

• Color
  • Brand
  • Font
  • Border
• Size
  • Border
  • Border Radius
  • Breakpoint
  • Spacing
  • Font
  • Width
  • Height
  • Box Shadow
  • Opacity
  • Z-Index
  • Line-Height

Release Types

Must be one of the following:

Major

• BREAKING CHANGE: A set of breaking changes.

Minor

• feat: A new feature

Patch

• fix: A bug fix
• perf: A code change that improves performance
• ci: A change to our CI pipelines/workflows.
• build: A change to the library build process (That does not break the consumer API).
• test: Added or improved testing in some area of the library.
• refactor: Changed code structure without affecting features.
• docs: Added to, or improved documentation.
• style: Change in code style without affecting features.