unify-token - npm Package Compare versions

Comparing version 1.8.0 to 2.0.0-beta-1

build/color.js

 const Neutral = {
   N0: '#FFFFFF',
-  N100: '#DBDEE2',
-  N200: '#9FA6B0',
-  N300: '#838994',
-  N400: '#6C727C',
-  N500: '#52565E',
-  N600: '#40454C',
-  N700: '#31353B',
-  N50: '#F3F4F5',
-  N75: '#E5E7E9',
-  N150: '#B5BBC5'
+  N100: '#EAEFF6',
+  N200: '#D6DFEB',
+  N300: '#BFC9D9',
+  N950: '#212121',
+  N400: '#AAB4C8',
+  N500: '#8D96AA',
+  N600: '#6D7588',
+  N700: '#525867',
+  N50: '#F4F7FA',
+  N800: '#40444E',
+  N900: '#2E3137',
+  N75: '#EAEFF6',
+  N1000: '#000000',
+  N150: '#BFC9D9'
 }
 
 const Red = {
-  R100: '#FFEAEF',
-  R200: '#FFCCD9',
-  R300: '#FD8AA7',
-  R400: '#FF5C84',
-  R500: '#EF144A',
-  R600: '#D6001C'
+  R200: '#FFB2C2',
+  R300: '#FF919F',
+  R950: '#51081E',
+  R400: '#FF7182',
+  R500: '#F94D63',
+  R600: '#E02954',
+  R700: '#B31D40',
+  R800: '#921633',
+  R900: '#701027',
+  R50: '#FFF5F6',
+  R100: '#FFDBE2'
 }
 
 const Green = {
-  G100: '#EBFFEF',
-  G200: '#D6FFDE',
-  G300: '#82EF95',
-  G400: '#4FD15A',
-  G500: '#03AC0E',
-  G600: '#12883D'
+  G50: '#ECFEF4',
+  G100: '#C9FDE0',
+  G200: '#83ECB2',
+  G300: '#4FE397',
+  G950: '#05301E',
+  G400: '#20CE7D',
+  G500: '#00AA5B',
+  G600: '#098A4E',
+  G700: '#176C45',
+  G800: '#145638',
+  G900: '#064329'
 }
 
 const Blue = {
-  B100: '#E5F5FF',
-  B200: '#CCEBFF',
-  B300: '#77CAFF',
-  B400: '#32AFFF',
-  B500: '#009BFF',
-  B600: '#0066A9'
+  B100: '#C5FCFF',
+  B200: '#70EAFA',
+  B300: '#46D8F1',
+  B950: '#102736',
+  B400: '#28B9E1',
+  B500: '#0094CF',
+  B600: '#0479B9',
+  B700: '#06649E',
+  B800: '#144D73',
+  B900: '#13354F',
+  B50: '#EBFFFE'
 }
 
 const Purple = {
-  P100: '#FBE7FF',
-  P200: '#EEBBFF',
-  P300: '#D07EFF',
-  P400: '#AC43F6',
-  P500: '#9022DC',
-  P600: '#7A08C9'
+  P100: '#F0DAFF',
+  P200: '#DEAFFF',
+  P300: '#CB90FF',
+  P950: '#330D65',
+  P400: '#B26EF5',
+  P500: '#9342ED',
+  P600: '#7F37D7',
+  P700: '#7421D9',
+  P800: '#5D1BB4',
+  P900: '#441188',
+  P50: '#FBF4FF'
 }
 
 const Teal = {
-  T100: '#EBF6F6',
-  T200: '#D2F2F2',
-  T300: '#B0E2E5',
-  T400: '#84C6C9',
-  T500: '#689C9E',
-  T600: '#3A6E70'
+  T400: '#11CEBC',
+  T950: '#042F31',
+  T500: '#009F92',
+  T600: '#04837E',
+  T700: '#056D6A',
+  T800: '#135351',
+  T900: '#0A3D3D',
+  T50: '#EDFFF9',
+  T100: '#C2FFF0',
+  T200: '#69F2E2',
+  T300: '#39E5D1'
 }
 
 const Yellow = {
-  Y100: '#FFFAE6',
-  Y200: '#FFF0B3',
+  Y900: '#6B1F03',
+  Y50: '#FFFAE6',
+  Y100: '#FFF1BA',
+  Y200: '#FFDD7F',
   Y300: '#FFC400',
-  Y400: '#FF8B00',
-  Y500: '#FA591D'
+  Y950: '#431403',
+  Y400: '#FFA617',
+  Y500: '#FF7F17',
+  Y600: '#F36819',
+  Y700: '#CC4C14',
+  Y800: '#992F00'
 }
@@ -67,0 +102,0 @@

build/v2/colors.js

 // Neutral
-export const N0 = '#FFFFFF';
-export const N100 = '#DBDEE2';
-export const N200 = '#9FA6B0';
-export const N300 = '#838994';
-export const N400 = '#6C727C';
-export const N500 = '#52565E';
-export const N600 = '#40454C';
-export const N700 = '#31353B';
-export const N50 = '#F3F4F5';
-export const N75 = '#E5E7E9';
-export const N150 = '#B5BBC5';
+export const N0 = 'var(--N0, #FFFFFF)';
+export const N100 = 'var(--N100, #EAEFF6)';
+export const N200 = 'var(--N200, #D6DFEB)';
+export const N300 = 'var(--N300, #BFC9D9)';
+export const N950 = 'var(--N950, #212121)';
+export const N400 = 'var(--N400, #AAB4C8)';
+export const N500 = 'var(--N500, #8D96AA)';
+export const N600 = 'var(--N600, #6D7588)';
+export const N700 = 'var(--N700, #525867)';
+export const N50 = 'var(--N50, #F4F7FA)';
+export const N800 = 'var(--N800, #40444E)';
+export const N900 = 'var(--N900, #2E3137)';
+export const N75 = 'var(--N75, #EAEFF6)';
+export const N1000 = 'var(--N1000, #000000)';
+export const N150 = 'var(--N150, #BFC9D9)';
 
 // Red
-export const R100 = '#FFEAEF';
-export const R200 = '#FFCCD9';
-export const R300 = '#FD8AA7';
-export const R400 = '#FF5C84';
-export const R500 = '#EF144A';
-export const R600 = '#D6001C';
+export const R200 = 'var(--R200, #FFB2C2)';
+export const R300 = 'var(--R300, #FF919F)';
+export const R950 = 'var(--R950, #51081E)';
+export const R400 = 'var(--R400, #FF7182)';
+export const R500 = 'var(--R500, #F94D63)';
+export const R600 = 'var(--R600, #E02954)';
+export const R700 = 'var(--R700, #B31D40)';
+export const R800 = 'var(--R800, #921633)';
+export const R900 = 'var(--R900, #701027)';
+export const R50 = 'var(--R50, #FFF5F6)';
+export const R100 = 'var(--R100, #FFDBE2)';
 
 // Green
-export const G100 = '#EBFFEF';
-export const G200 = '#D6FFDE';
-export const G300 = '#82EF95';
-export const G400 = '#4FD15A';
-export const G500 = '#03AC0E';
-export const G600 = '#12883D';
+export const G50 = 'var(--G50, #ECFEF4)';
+export const G100 = 'var(--G100, #C9FDE0)';
+export const G200 = 'var(--G200, #83ECB2)';
+export const G300 = 'var(--G300, #4FE397)';
+export const G950 = 'var(--G950, #05301E)';
+export const G400 = 'var(--G400, #20CE7D)';
+export const G500 = 'var(--G500, #00AA5B)';
+export const G600 = 'var(--G600, #098A4E)';
+export const G700 = 'var(--G700, #176C45)';
+export const G800 = 'var(--G800, #145638)';
+export const G900 = 'var(--G900, #064329)';
 
 // Blue
-export const B100 = '#E5F5FF';
-export const B200 = '#CCEBFF';
-export const B300 = '#77CAFF';
-export const B400 = '#32AFFF';
-export const B500 = '#009BFF';
-export const B600 = '#0066A9';
+export const B100 = 'var(--B100, #C5FCFF)';
+export const B200 = 'var(--B200, #70EAFA)';
+export const B300 = 'var(--B300, #46D8F1)';
+export const B950 = 'var(--B950, #102736)';
+export const B400 = 'var(--B400, #28B9E1)';
+export const B500 = 'var(--B500, #0094CF)';
+export const B600 = 'var(--B600, #0479B9)';
+export const B700 = 'var(--B700, #06649E)';
+export const B800 = 'var(--B800, #144D73)';
+export const B900 = 'var(--B900, #13354F)';
+export const B50 = 'var(--B50, #EBFFFE)';
 
 // Purple
-export const P100 = '#FBE7FF';
-export const P200 = '#EEBBFF';
-export const P300 = '#D07EFF';
-export const P400 = '#AC43F6';
-export const P500 = '#9022DC';
-export const P600 = '#7A08C9';
+export const P100 = 'var(--P100, #F0DAFF)';
+export const P200 = 'var(--P200, #DEAFFF)';
+export const P300 = 'var(--P300, #CB90FF)';
+export const P950 = 'var(--P950, #330D65)';
+export const P400 = 'var(--P400, #B26EF5)';
+export const P500 = 'var(--P500, #9342ED)';
+export const P600 = 'var(--P600, #7F37D7)';
+export const P700 = 'var(--P700, #7421D9)';
+export const P800 = 'var(--P800, #5D1BB4)';
+export const P900 = 'var(--P900, #441188)';
+export const P50 = 'var(--P50, #FBF4FF)';
 
 // Teal
-export const T100 = '#EBF6F6';
-export const T200 = '#D2F2F2';
-export const T300 = '#B0E2E5';
-export const T400 = '#84C6C9';
-export const T500 = '#689C9E';
-export const T600 = '#3A6E70';
+export const T400 = 'var(--T400, #11CEBC)';
+export const T950 = 'var(--T950, #042F31)';
+export const T500 = 'var(--T500, #009F92)';
+export const T600 = 'var(--T600, #04837E)';
+export const T700 = 'var(--T700, #056D6A)';
+export const T800 = 'var(--T800, #135351)';
+export const T900 = 'var(--T900, #0A3D3D)';
+export const T50 = 'var(--T50, #EDFFF9)';
+export const T100 = 'var(--T100, #C2FFF0)';
+export const T200 = 'var(--T200, #69F2E2)';
+export const T300 = 'var(--T300, #39E5D1)';
 
 // Yellow
-export const Y100 = '#FFFAE6';
-export const Y200 = '#FFF0B3';
-export const Y300 = '#FFC400';
-export const Y400 = '#FF8B00';
-export const Y500 = '#FA591D';
+export const Y900 = 'var(--Y900, #6B1F03)';
+export const Y50 = 'var(--Y50, #FFFAE6)';
+export const Y100 = 'var(--Y100, #FFF1BA)';
+export const Y200 = 'var(--Y200, #FFDD7F)';
+export const Y300 = 'var(--Y300, #FFC400)';
+export const Y950 = 'var(--Y950, #431403)';
+export const Y400 = 'var(--Y400, #FFA617)';
+export const Y500 = 'var(--Y500, #FF7F17)';
+export const Y600 = 'var(--Y600, #F36819)';
+export const Y700 = 'var(--Y700, #CC4C14)';
+export const Y800 = 'var(--Y800, #992F00)';

CHANGELOG.md

@@ -10,2 +10,8 @@ # 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`.
+
 ## 1.8.0
@@ -12,0 +18,0 @@ * :star2: Added new motion token, duration and easing token. Import them from `unify-token/build/v2/motions`.

package.json

 {
   "name": "unify-token",
-  "version": "1.8.0",
+  "version": "2.0.0-beta-1",
   "description": "Design Tokens for the Unify Design System",
@@ -20,6 +20,7 @@ "main": "build/index.js",
   "devDependencies": {
+    "eslint": "^7.18.0",
+    "glob": "7.1.3",
     "rimraf": "^2.6.2",
-    "theo": "8.0.1",
-    "glob": "7.1.3"
+    "theo": "8.0.1"
   }
 }

New alerts

New author

Supply chain risk

A 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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25213

increased by26.82%

Number of package files

16

increased by23.08%

Lines of code

720

increased by35.85%

Worsened metrics

Dev dependency count

4

increased by33.33%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes