unify-token - npm Package Compare versions

Comparing version 2.0.0-beta-9 to 2.0.0-dev-1

build/color.js

@@ -89,2 +89,3 @@ const Neutral = {
   colorToggleOff: '#6C727C',
+  colorTickerIconWarning: '#FFC400',
   colorSearchbar: '#F3F4F5',
@@ -94,7 +95,11 @@ colorPageBackground: '#FFFFFF',
   colorToasterError: '#D6001C',
-  colorIconDisabled: '#DBDEE2',
+  colorIconDisabled: '#DAE2ED',
+  colorTickerIconDefault: '#84C6C9',
   colorOverlay: '#31353B',
   colorTickerInfo: '#F3F4F5',
   colorTickerDefault: '#EBF6F6',
+  colorTickerIconInfo: '#DBDEE2',
+  colorChipEnabled: '#EBFFEF',
   colorShadow: '#31353B',
+  colorTickerIconError: '#FFCCD9',
   colorDivider: '#E5E7E9',
@@ -105,3 +110,3 @@ colorTickerError: '#FFEAEF',
   colorBorder: '#E5E7E9',
-  colorIconEnabled: '#6C727C',
+  colorIconEnabled: '#525867',
   colorTextHigh: '#31353B',
@@ -108,0 +113,0 @@ colorPagecontrolDefault: '#E5E7E9',

build/v2/colors.js

@@ -147,2 +147,3 @@ // Neutral
 export const colorToggleOff = 'var(--color-toggle-off, #6C727C)';
+export const colorTickerIconWarning = 'var(--color-ticker-icon-warning, rgba(255, 196, 0, 0.25))';
 export const colorSearchbar = 'var(--color-searchbar, #F3F4F5)';
@@ -152,7 +153,11 @@ export const colorPageBackground = 'var(--color-page-background, #FFFFFF)';
 export const colorToasterError = 'var(--color-toaster-error, #D6001C)';
-export const colorIconDisabled = 'var(--color-icon-disabled, #DBDEE2)';
+export const colorIconDisabled = 'var(--color-icon-disabled, #DAE2ED)';
+export const colorTickerIconDefault = 'var(--color-ticker-icon-default, rgba(132, 198, 201, 0.4))';
 export const colorOverlay = 'var(--color-overlay, rgba(49, 53, 59, 0.68))';
 export const colorTickerInfo = 'var(--color-ticker-info, #F3F4F5)';
 export const colorTickerDefault = 'var(--color-ticker-default, #EBF6F6)';
+export const colorTickerIconInfo = 'var(--color-ticker-icon-info, #DBDEE2)';
+export const colorChipEnabled = 'var(--color-chip-enabled, #EBFFEF)';
 export const colorShadow = 'var(--color-shadow, rgba(49, 53, 59, 0.12))';
+export const colorTickerIconError = 'var(--color-ticker-icon-error, #FFCCD9)';
 export const colorDivider = 'var(--color-divider, #E5E7E9)';
@@ -163,3 +168,3 @@ export const colorTickerError = 'var(--color-ticker-error, #FFEAEF)';
 export const colorBorder = 'var(--color-border, #E5E7E9)';
-export const colorIconEnabled = 'var(--color-icon-enabled, #6C727C)';
+export const colorIconEnabled = 'var(--color-icon-enabled, #525867)';
 export const colorTextHigh = 'var(--color-text-high, rgba(49, 53, 59, 0.96))';
@@ -166,0 +171,0 @@ export const colorPagecontrolDefault = 'var(--color-pagecontrol-default, #E5E7E9)';

CHANGELOG.md

@@ -11,6 +11,7 @@ # Change Log
 ## 2.0.0
-* :star2: Updated the color token to the latest color principles
 * :boom: Change value of color token to css var function string such `var(--N0, #FFFFFF)`.
 * :boom: Remove unused non web tokens (Android & iOS) from build.
-* :star2: Add new importable dark color css file: `dark-color.css`.
+* :rocket: New color token based on Tokopedia Nest specifications. This new token use new and simplified import path from `unify-token/build/colors/v2` to `unify-token/colors`.
+* :star2: Updated the color token to the latest color principles.
+* :star2: Add new importable dark and light color css file (`dark.css` and `light.css`).
 
@@ -17,0 +18,0 @@ ## 1.8.0

package.json

 {
   "name": "unify-token",
-  "version": "2.0.0-beta-9",
+  "version": "2.0.0-dev-1",
   "description": "Design Tokens for the Unify Design System",
@@ -8,6 +8,6 @@ "main": "build/index.js",
   "scripts": {
-    "build": "rimraf ./build && node globfile.js",
+    "build": "npm run clean --scripts-prepend-node-path && node globfile.js && node globfile.nest.js",
     "build-edge": "rimraf ./build && node globfile.edge.js",
     "build-test": "rimraf ./build && theo ./tokens/index.yml --format module.js,scss,common.js,ios.json,android.xml --dest ./build",
-    "clean": "rimraf ./build",
+    "clean": "rimraf ./build ./colors ./typography ./grids ./motions ./spacings",
     "sketch-json": "rimraf ./sketch-json ./sketch/test.zip && sketch-json *.sketch",
@@ -19,9 +19,18 @@ "prepublishOnly": "npm run build"
   ],
+  "files": [
+    "build",
+    "color",
+    "typography",
+    "spacing",
+    "motion"
+  ],
   "license": "MIT",
   "devDependencies": {
     "eslint": "^7.18.0",
-    "glob": "7.1.3",
-    "rimraf": "^2.6.2",
-    "theo": "8.0.1"
+    "glob": "7.1.6",
+    "lodash": "^4.17.21",
+    "rimraf": "^3.0.2",
+    "theo": "8.1.5",
+    "tinycolor2": "^1.4.2"
   }
 }

README.md

 # Unify Token
 
-Unify Token are collection of design token 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 web projects.
 
@@ -10,331 +10,46 @@ The tokens are consist of:
 4. Grid
+5. Motion
 
-#### For now iOS only support these design token:
-* `Color`
-* `Typography: Font Size`
-
-
-## 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.
-
+## Installation
+On your project folder,
 ```
-< 1.5.0  = unify-token/build/...
->= 1.5.0 = unify-token/build/v2/...
+npm install unify-token
 ```
-
-> 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
+Or for yarn
 ```
-import { N0, N50, R100, ... } from 'unify-token/build/v2/colors';
-...
-
-.some-class {
-  color: ${N50};
-  background-color: ${R100};
-}
+yarn add unify-token
 ```
 
-**Neutral**
-```
-N0 = '#FFFFFF';
-N50 = '#F3F4F5';
-N75 = '#E5E7E9';
-N100 = '#DBDEE2';
-N150 = '#B5BBC5';
-N200 = '#9FA6B0';
-N300 = '#838994';
-N400 = '#6C727C';
-N500 = '#52565E';
-N600 = '#40454C';
-N700 = '#31353B';
-```
+## Basic Usage
+### Regular Tokens
+```javascript
+import { N0, N700 } from 'unify-token/build/v2/colors';
 
-**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};
+const youComponentStyle = {
+  backgroundColor: ${N0},
+  color: ${N700},
+  /* Some additional styling */
 }
 ```
 
-**Neutral**
-```
-N0 = '#FFFFFF';
-N50 = '#F3F4F5';
-N75 = '#E5E7E9';
-N100 = '#DBDEE2';
-N150 = '#B5BBC5';
-N200 = '#9FA6B0';
-N300 = '#838994';
-N400 = '#6C727C';
-N500 = '#52565E';
-N600 = '#40454C';
-N700 = '#31353B';
-```
+Available tokens
+- unify-token/build/v2/colors
+- unify-token/build/v2/typographies
+- unify-token/build/v2/spacings
+- unify-token/build/v2/grids
+- unify-token/build/v2/motions
 
-**Red**
-```
-R100 = '#FFEAEF';
-R200 = '#FFCCD9';
-R300 = '#FD8AA7';
-R400 = '#FF5C84';
-R500 = '#EF144A';
-R600 = '#D6001C';
-```
+### Nest Tokens
+```javascript
+import { nn950, nn0 } from 'unify-token/color';
 
-**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};
+const yourComponentStyle = {
+  backgroundColor: ${nn0},
+  color: ${nn950},
+  /* Some additional styling */
 }
 ```
+Curently only color token that available with this import path format
 
-**Font Type**
-```
-stackHeading = Nunito Sans
-desktop = Open Sans
-lite = Open Sans
-ios = SF Pro Text
-android = Roboto
-```
-
-**Font Size**
-```
-lvl1 = 10px
-lvl2 = 12px
-lvl3 = 14px
-lvl4 = 16px
-lvl5 = 18px
-lvl6 = 20px
-lvl7 = 24px
-lvl8 = 28px
-lvl9 = 34px
-lvl10 = 38px
-```
-
-**Font Weight**
-```
-regular = 400
-bold = 700
-extraBold = 800
-```
-
-**Line Height**
-```
-lvl1 = 16px
-lvl2 = 18px
-lvl3 = 20px
-lvl4 = 22px
-lvl5 = 24px
-lvl6 = 26px
-lvl7 = 30px
-lvl8 = 34px
-lvl9 = 40px
-lvl10 = 44px
-```
-
----
-
-### Grid
-#### Usage
-```
-import { breakpoint, gutter, ... } from 'unify-token/build/grid';
-...
-
-.some-class {
-  width: ${breakpoint.mobile};
-  padding: ${gutter.mobile};
-}
-```
-
-**Breakpoint**
-```
-mobile = 768px
-tablet = 1024px
-desktop = 1200px
-```
-
-**Gutter**
-```
-mobile = 8px
-tablet = 12px
-desktop = 12px
-```
-
-**Column**
-```
-mobile = 8px
-tablet = 12px
-desktop = 12px
-```
-
----
-
-### Spacing
-#### Usage
-```
-import { spacing, layout } from 'unify-token/build/grid';
-
-...
-
-.some-class {
-  padding: ${spacing.lvl3};
-  margin: ${layout.lvl2};
-}
-```
-
-**Spacing**
-```
-lvl1 = 2px
-lvl2 = 4px
-lvl3 = 8px
-lvl4 = 16px
-lvl5 = 24px
-lvl6 = 32px
-lvl7 = 40px
-lvl8 = 48px
-```
-
-**Layout**
-```
-lvl1 = 8px
-lvl2 = 16px
-lvl3 = 24px
-lvl4 = 32px
-lvl5 = 40px
-lvl6 = 48px
-lvl7 = 64px
-lvl8 = 96px
-lvl9 = 128px
-```
+## Issues
+If you find any issue or concern please mention us @unify-dev on Slack.

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

20951

decreased by-27.23%

Dev dependency count

6

increased by50%

Number of package files

13

decreased by-18.75%

Lines of code

532

decreased by-25.49%

Number of lines in readme file

54

decreased by-84.12%

No dependency changes