Emergn Design Tokens

Emergn design token package that is transformed and ready to use with help of Amazon's Style Dictionary.

Installation

To install, you can use npm.

$ npm install @emergn/design-system-tokens

Getting Started

JS

• Import tokens file into component:

  import tokens from '@emergn/design-system-tokens/assets/tokens/tokens.js’;

• Or use as a constant:

  const  tokens = require('@emergn/design-system-tokens/assets/tokens/tokens');

SCSS

• Import tokens:

  @import '@emergn/design-system-tokens/assets/tokens/tokens';

• Import styles:

  @import '@emergn/design-system-tokens/assets/styles/styles'; 

Changelog

[1.1.19] - 2022-09-12

Improvement

• Improved typography mixin (DS-587)

[1.1.18] - 2022-07-28

Refactoring

• Renamed icon folder from 'dist' to 'icons' (DS-547)

Improvement

• Changed breakpoint mixin naming (DS-549)

Tokens added

• Added tokens for container focus state
• Added tokens for datepicker (form tokens)

[1.1.17] - 2022-03-18

Tokens added

• Added tokens for disabled button

[1.1.16] - 2022-03-10

Updates

• Updated shadow tokens (from single shadow to multiple)
• Adjusted 'shadow' mixin to work with multiple shadows
• Updated notification and link tokens
• Added favicons

[1.1.15] - 2022-02-14

Updates

• Added CopyPaste icon
• Added tokens for link colors ($colors-link-*)
• Updated shadows tokens

Improvement

• Optimized SVG & created JSON files from SVG

[1.1.14] - 2022-01-27

Bugfix

• Fixed deprecation warning regarding icon line-width calculations

[1.1.13] - 2022-01-27

Tokens updated

• Updated icon padding tokens
• Updated cotainer max-width tokens ($container-maxwidths-*)
• Updated container colors tokens
• Last tag tokens renamed (pressed to active)

Styles

• Adjusted icon-size mixin to use new padding tokens
• Added gutter mixins (@mixin container-horizontal-gutters, @mixin container-vertical-gutters)

[1.1.12] - 2022-01-17

Tokens updated

• Renamed tokens for tag colors (pressed to active)

Tokens added

• Added tokens for container colors
  • $colors-container-background-success
  • $colors-container-background-warning
  • $colors-container-background-critical
  • $colors-container-background-information

[1.1.10] - 2022-01-14

Improvement

• Added changelog

[1.1.9] - 2022-01-14

Tokens added

• Added tokens for container colors ($colors-container-*)

[1.1.8] - 2022-01-12

BREAKING CHANGE

• Token $form-content-padding was changed on
  • $form-content-paddinghorizontal-sm
  • $form-content-paddinghorizontal-lg
• Token $form-content-spacing was changed on
  • $form-content-spacing-sm
  • $form-content-spacing-lg

Tokens added

• Added tokens for vertical padding in forms
• Added tokens for tag groups

Bugfix

• Fixed 'shadow' mixin

[1.1.7] - 2022-01-12

Tokens updated

• Updated tokens for container paddings

[1.1.6] - 2022-01-10

Bugfix

• Added icon size rounding in 'icon-size' mixin

[1.1.5] - 2022-01-10

Improvement

• Ajusted icon size calculations in 'icon-size' mixin

[1.1.4] - 2022-01-10

BREAKING CHANGE

• Shadow tokens get type property, and it breaks 'shadow' mixin (fixed in 1.1.8)

Tokens added

• Added tokens $spacing-none, $padding-4, $padding-none
• Added tokens for container paddings and spacings
• Added tokens for container corner radius

Bugfix

• Adjusted icon line-width in 'icon-size' mixin

[1.1.3] - 2021-12-24

Bugfix

• Fixed bug in typography mixin

[1.1.2] - 2021-12-24

BREAKING CHANGE

• Updated icons on the orignal streamline to fix rendering issues
• Updated 'icon-size' mixin according to the new icons
• Removed 'map-deep-get' function, now use 'map.get' function from sass