New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
unify-token
Advanced tools
unify-token - npm Package Compare versions
Comparing version 1.5.0-dev-1 to 1.5.0-dev-2
@@ -12,2 +12,3 @@ # Change Log | ||
| * :boom: add token color v2 for lite | ||
| * :boom: improve README.md | ||
@@ -14,0 +15,0 @@ ## 1.4.0 |
| { | ||
| "name": "unify-token", | ||
| "version": "1.5.0-dev-1", | ||
| "version": "1.5.0-dev-2", | ||
| "description": "Design Tokens for the Unify Design System", | ||
@@ -5,0 +5,0 @@ "main": "build/index.js", |
348
README.md
| # Unify Token | ||
| Unify Token are collection of global variable that can be used on any supported Tokopedia Platform (currently Web, Android and iOS). | ||
| Unify Token are collection of design token that can be used on any supported Tokopedia Platform (currently Web, Android and iOS). | ||
| The Token are consist of: | ||
| The tokens are consist of: | ||
| 1. Color | ||
@@ -10,16 +10,221 @@ 2. Typography | ||
| 4. Grid | ||
| #### For now iOS only support these design token: | ||
| #### For now iOS only support these design token: | ||
| * `Color` | ||
| * `Typography : Font Size` | ||
| * `Typography: Font Size` | ||
| ## Cheat Sheet | ||
| ## Important Info | ||
| Starting from version `1.5.0`, please use new token that are on different folder path. The older token are still on previous path but will be removed on the future updates. | ||
| ``` | ||
| < 1.5.0 = unify-token/build/... | ||
| >= 1.5.0 = unify-token/build/v2/... | ||
| ``` | ||
| > Currently the new version only support `colors`, other will follow because the naming convention are still not decided. | ||
| The Cheat Sheet for the tokens also renewed, please refer to the link below. | ||
| 1. [New Version Cheat Sheet](#cheat-sheet-new-version--150) | ||
| 2. [Old Version Cheat Sheet](#cheat-sheet-old-version--150) | ||
| --- | ||
| ## Cheat Sheet (New Version, >= 1.5.0) | ||
| ### Colors | ||
| #### Usage | ||
| ``` | ||
| import { N0, N50, R100, ... } from 'unify-token/build/v2/colors'; | ||
| ... | ||
| .some-class { | ||
| color: ${N50}; | ||
| background-color: ${R100}; | ||
| } | ||
| ``` | ||
| **Neutral** | ||
| ``` | ||
| N0 = '#FFFFFF'; | ||
| N50 = '#F3F4F5'; | ||
| N75 = '#E5E7E9'; | ||
| N100 = '#DBDEE2'; | ||
| N150 = '#B5BBC5'; | ||
| N200 = '#9FA6B0'; | ||
| N300 = '#838994'; | ||
| N400 = '#6C727C'; | ||
| N500 = '#52565E'; | ||
| N600 = '#40454C'; | ||
| N700 = '#31353B'; | ||
| ``` | ||
| **Red** | ||
| ``` | ||
| R100 = '#FFEAEF'; | ||
| R200 = '#FFCCD9'; | ||
| R300 = '#FD8AA7'; | ||
| R400 = '#FF5C84'; | ||
| R500 = '#EF144A'; | ||
| R600 = '#D6001C'; | ||
| ``` | ||
| **Green** | ||
| ``` | ||
| G100 = '#EBFFEF'; | ||
| G200 = '#D6FFDE'; | ||
| G300 = '#82EF95'; | ||
| G400 = '#4FD15A'; | ||
| G500 = '#03AC0E'; | ||
| G600 = '#12883D'; | ||
| ``` | ||
| **Blue** | ||
| ``` | ||
| B100 = '#E5F5FF'; | ||
| B200 = '#CCEBFF'; | ||
| B300 = '#77CAFF'; | ||
| B400 = '#32AFFF'; | ||
| B500 = '#009BFF'; | ||
| B600 = '#0066A9'; | ||
| ``` | ||
| **Purple** | ||
| ``` | ||
| P100 = '#FBE7FF'; | ||
| P200 = '#EEBBFF'; | ||
| P300 = '#D07EFF'; | ||
| P400 = '#AC43F6'; | ||
| P500 = '#9022DC'; | ||
| P600 = '#7A08C9'; | ||
| ``` | ||
| **Teal** | ||
| ``` | ||
| T100 = '#EBF6F6'; | ||
| T200 = '#D2F2F2'; | ||
| T300 = '#B0E2E5'; | ||
| T400 = '#84C6C9'; | ||
| T500 = '#689C9E'; | ||
| T600 = '#3A6E70'; | ||
| ``` | ||
| **Yellow** | ||
| ``` | ||
| Y100 = '#FFFAE6'; | ||
| Y200 = '#FFF0B3'; | ||
| Y300 = '#FFC400'; | ||
| Y400 = '#FF8B00'; | ||
| Y500 = '#FA591D'; | ||
| ``` | ||
| --- | ||
| ## Cheat Sheet (Old Version, < 1.5.0) | ||
| ### Colors | ||
| #### Usage | ||
| ``` | ||
| import { Neutral, Red, Green, ... } from 'unify-token/build/color'; | ||
| ... | ||
| .some-class { | ||
| color: ${Neutral.N0}; | ||
| background-color: ${Red.R500}; | ||
| } | ||
| ``` | ||
| **Neutral** | ||
| ``` | ||
| N0 = '#FFFFFF'; | ||
| N50 = '#F3F4F5'; | ||
| N75 = '#E5E7E9'; | ||
| N100 = '#DBDEE2'; | ||
| N150 = '#B5BBC5'; | ||
| N200 = '#9FA6B0'; | ||
| N300 = '#838994'; | ||
| N400 = '#6C727C'; | ||
| N500 = '#52565E'; | ||
| N600 = '#40454C'; | ||
| N700 = '#31353B'; | ||
| ``` | ||
| **Red** | ||
| ``` | ||
| R100 = '#FFEAEF'; | ||
| R200 = '#FFCCD9'; | ||
| R300 = '#FD8AA7'; | ||
| R400 = '#FF5C84'; | ||
| R500 = '#EF144A'; | ||
| R600 = '#D6001C'; | ||
| ``` | ||
| **Green** | ||
| ``` | ||
| G100 = '#EBFFEF'; | ||
| G200 = '#D6FFDE'; | ||
| G300 = '#82EF95'; | ||
| G400 = '#4FD15A'; | ||
| G500 = '#03AC0E'; | ||
| G600 = '#12883D'; | ||
| ``` | ||
| **Blue** | ||
| ``` | ||
| B100 = '#E5F5FF'; | ||
| B200 = '#CCEBFF'; | ||
| B300 = '#77CAFF'; | ||
| B400 = '#32AFFF'; | ||
| B500 = '#009BFF'; | ||
| B600 = '#0066A9'; | ||
| ``` | ||
| **Purple** | ||
| ``` | ||
| P100 = '#FBE7FF'; | ||
| P200 = '#EEBBFF'; | ||
| P300 = '#D07EFF'; | ||
| P400 = '#AC43F6'; | ||
| P500 = '#9022DC'; | ||
| P600 = '#7A08C9'; | ||
| ``` | ||
| **Teal** | ||
| ``` | ||
| T100 = '#EBF6F6'; | ||
| T200 = '#D2F2F2'; | ||
| T300 = '#B0E2E5'; | ||
| T400 = '#84C6C9'; | ||
| T500 = '#689C9E'; | ||
| T600 = '#3A6E70'; | ||
| ``` | ||
| **Yellow** | ||
| ``` | ||
| Y100 = '#FFFAE6'; | ||
| Y200 = '#FFF0B3'; | ||
| Y300 = '#FFC400'; | ||
| Y400 = '#FF8B00'; | ||
| Y500 = '#FA591D'; | ||
| ``` | ||
| --- | ||
| ### Typography | ||
| #### Usage | ||
| ``` | ||
| import { fontSize, fontWeight, ... } from 'unify-token/build/typograhpy'; | ||
| ... | ||
| .some-class { | ||
| font-size: ${fontSize.lvl3}; | ||
| font-weight: ${fontWeight.regular}; | ||
| } | ||
| ``` | ||
| **Font Type** | ||
| ``` | ||
| stackHeading: Nunito Sans | ||
| desktop: Open Sans | ||
| lite: Open Sans | ||
| ios: SF Pro Text | ||
| android: Roboto | ||
| stackHeading = Nunito Sans | ||
| desktop = Open Sans | ||
| lite = Open Sans | ||
| ios = SF Pro Text | ||
| android = Roboto | ||
| ``` | ||
@@ -29,12 +234,12 @@ | ||
| ``` | ||
| lvl1: 10 | ||
| lvl2: 12 | ||
| lvl3: 14 | ||
| lvl4: 16 | ||
| lvl5: 18 | ||
| lvl6: 20 | ||
| lvl7: 24 | ||
| lvl8: 28 | ||
| lvl9: 34 | ||
| lvl10: 38 | ||
| lvl1 = 10px | ||
| lvl2 = 12px | ||
| lvl3 = 14px | ||
| lvl4 = 16px | ||
| lvl5 = 18px | ||
| lvl6 = 20px | ||
| lvl7 = 24px | ||
| lvl8 = 28px | ||
| lvl9 = 34px | ||
| lvl10 = 38px | ||
| ``` | ||
@@ -44,5 +249,5 @@ | ||
| ``` | ||
| regular: 400 | ||
| bold: 700 | ||
| extraBold: 800 | ||
| regular = 400 | ||
| bold = 700 | ||
| extraBold = 800 | ||
| ``` | ||
@@ -52,12 +257,12 @@ | ||
| ``` | ||
| lvl1: 16 | ||
| lvl2: 18 | ||
| lvl3: 20 | ||
| lvl4: 22 | ||
| lvl5: 24 | ||
| lvl6: 26 | ||
| lvl7: 30 | ||
| lvl8: 34 | ||
| lvl9: 40 | ||
| lvl10: 44 | ||
| lvl1 = 16px | ||
| lvl2 = 18px | ||
| lvl3 = 20px | ||
| lvl4 = 22px | ||
| lvl5 = 24px | ||
| lvl6 = 26px | ||
| lvl7 = 30px | ||
| lvl8 = 34px | ||
| lvl9 = 40px | ||
| lvl10 = 44px | ||
| ``` | ||
@@ -68,7 +273,18 @@ | ||
| ### Grid | ||
| #### Usage | ||
| ``` | ||
| import { breakpoint, gutter, ... } from 'unify-token/build/grid'; | ||
| ... | ||
| .some-class { | ||
| width: ${breakpoint.mobile}; | ||
| padding: ${gutter.mobile}; | ||
| } | ||
| ``` | ||
| **Breakpoint** | ||
| ``` | ||
| mobile: 768 | ||
| tablet: 1024 | ||
| desktop: 1200 | ||
| mobile = 768px | ||
| tablet = 1024px | ||
| desktop = 1200px | ||
| ``` | ||
@@ -78,5 +294,5 @@ | ||
| ``` | ||
| mobile: 8 | ||
| tablet: 12 | ||
| desktop: 12 | ||
| mobile = 8px | ||
| tablet = 12px | ||
| desktop = 12px | ||
| ``` | ||
@@ -86,5 +302,5 @@ | ||
| ``` | ||
| mobile: 8 | ||
| tablet: 12 | ||
| desktop: 12 | ||
| mobile = 8px | ||
| tablet = 12px | ||
| desktop = 12px | ||
| ``` | ||
@@ -95,12 +311,24 @@ | ||
| ### Spacing | ||
| #### Usage | ||
| ``` | ||
| import { spacing, layout } from 'unify-token/build/grid'; | ||
| ... | ||
| .some-class { | ||
| padding: ${spacing.lvl3}; | ||
| margin: ${layout.lvl2}; | ||
| } | ||
| ``` | ||
| **Spacing** | ||
| ``` | ||
| lvl1: 2 | ||
| lvl2: 4 | ||
| lvl3: 8 | ||
| lvl4: 16 | ||
| lvl5: 24 | ||
| lvl6: 32 | ||
| lvl7: 40 | ||
| lvl8: 48 | ||
| lvl1 = 2px | ||
| lvl2 = 4px | ||
| lvl3 = 8px | ||
| lvl4 = 16px | ||
| lvl5 = 24px | ||
| lvl6 = 32px | ||
| lvl7 = 40px | ||
| lvl8 = 48px | ||
| ``` | ||
@@ -110,11 +338,11 @@ | ||
| ``` | ||
| lvl1: 8 | ||
| lvl2: 16 | ||
| lvl3: 24 | ||
| lvl4: 32 | ||
| lvl5: 40 | ||
| lvl6: 48 | ||
| lvl7: 64 | ||
| lvl8: 96 | ||
| lvl9: 128 | ||
| lvl1 = 8px | ||
| lvl2 = 16px | ||
| lvl3 = 24px | ||
| lvl4 = 32px | ||
| lvl5 = 40px | ||
| lvl6 = 48px | ||
| lvl7 = 64px | ||
| lvl8 = 96px | ||
| lvl9 = 128px | ||
| ``` |
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by23.35%
19002
- Number of lines in readme file
- increased by203.57%
340
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes