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