@kaizen/design-tokens
Advanced tools
@kaizen/design-tokens - npm Package Compare versions
Comparing version 2.0.1 to 2.0.2
@@ -6,2 +6,10 @@ # Change Log | ||
| ## [2.0.2](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@2.0.1...@kaizen/design-tokens@2.0.2) (2020-07-10) | ||
| **Note:** Version bump only for package @kaizen/design-tokens | ||
| ## [2.0.1](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@2.0.0...@kaizen/design-tokens@2.0.1) (2020-07-09) | ||
@@ -8,0 +16,0 @@ |
| { | ||
| "name": "@kaizen/design-tokens", | ||
| "description": "Tokens used in the Kaizen Design System", | ||
| "version": "2.0.1", | ||
| "version": "2.0.2", | ||
| "homepage": "https://github.com/cultureamp/kaizen-design-system/tree/master/packages/design-tokens", | ||
@@ -30,3 +30,3 @@ "repository": { | ||
| }, | ||
| "gitHead": "1b0d7ac6427521543517ec5064c21eab20a7ebc5" | ||
| "gitHead": "8f29c959a633c82d8939bc00562909312c3c95a6" | ||
| } |
| # Kaizen Tokens | ||
| Design tokens for all platforms. | ||
| ## About | ||
| Design Tokens are the heart of every Design System. The tokens represented here are platform-agnostic (JSON), as this will help us contribute to & facilitate the maintenance of living style guides. This package defines all the option tokens in Kaizen. | ||
| Design tokens are named and stored visual design traits, including colors, typography, and animation timings. Design Tokens are the heart of every Design System. | ||
| The tokens represented here are platform-agnostic (JSON), as this will help us contribute to & facilitate the maintenance of living style guides. This package defines all the option tokens in Kaizen. | ||
| - **Option tokens** offer options. For example, `$kz-color-wisteria-500: #898ba9;` is one color option available. | ||
| - **Decision tokens** communicate decisions about when to apply an option token to a context. For example, the color used for text is a decision. | ||
| In its current state this package supports Sass and Less variables, generated from a JSON tokens file. | ||
@@ -12,2 +19,3 @@ | ||
| ## Installation | ||
| ``` | ||
@@ -18,3 +26,5 @@ yarn add @kaizen/design-tokens | ||
| ## Usage | ||
| ### Sass | ||
| ``` | ||
@@ -26,2 +36,3 @@ ## Note helper functions are provided | ||
| ### Less | ||
| ``` | ||
@@ -32,3 +43,4 @@ ## Note helper functions are provided | ||
| ### Javascript | ||
| ### JavaScript | ||
| ``` | ||
@@ -39,12 +51,15 @@ import * as tokens from @kaizen/design-tokens/tokens/[color/depth/layout/spacing/typography] | ||
| ## Where possible, we keep things unitless. | ||
| When adding support for another target the transformation should add the appropriate unit to the artefact. For example, converting typography sizes to Sass/Less should add REM. | ||
| ### Web | ||
| All values in tokens are represented as rem, em or px. | ||
| * Use REMs for sizes and spacing (grid). | ||
| * Use EMs for media queries. | ||
| * Use px for borders. | ||
| * Use REMs for sizes and spacing (grid). | ||
| * Use EMs for media queries. | ||
| * Use px for borders. | ||
| ## Contributing | ||
| See [CONRTIBUTING.md](https://github.com/cultureamp/kaizen-design-system/blob/master/packages/design-tokens/CONTRIBUTING.md) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.38%
42685
- Number of lines in readme file
- increased by32.61%
61