@metamask/design-tokens - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

@@ -9,4 +9,9 @@ # Changelog
 
+## [1.2.0]
+### Changed
+- token updates ([#22](https://github.com/MetaMask/design-tokens/pull/22))
+- Adding storybook and design token documentation ([#19](https://github.com/MetaMask/design-tokens/pull/19))
+
 ## [1.1.0]
-### Uncategorized
+### Changed
 - Adding css stylesheet containg color design tokens ([#17](https://github.com/MetaMask/design-tokens/pull/17))
@@ -19,4 +24,5 @@ - Add issue template ([#20](https://github.com/MetaMask/design-tokens/pull/20))
 
-[Unreleased]: https://github.com/MetaMask/design-tokens/compare/v1.1.0...HEAD
+[Unreleased]: https://github.com/MetaMask/design-tokens/compare/v1.2.0...HEAD
+[1.2.0]: https://github.com/MetaMask/design-tokens/compare/v1.1.0...v1.2.0
 [1.1.0]: https://github.com/MetaMask/design-tokens/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/MetaMask/design-tokens/releases/tag/v1.0.0

dist/colors/index.d.ts

@@ -12,2 +12,6 @@ declare const colors: {
         };
+        icon: {
+            default: string;
+            muted: string;
+        };
         border: {
@@ -28,2 +32,9 @@ default: string;
         };
+        secondary: {
+            default: string;
+            alternative: string;
+            muted: string;
+            inverse: string;
+            disabled: string;
+        };
         error: {
@@ -68,2 +79,6 @@ default: string;
         };
+        icon: {
+            default: string;
+            muted: string;
+        };
         border: {
@@ -84,2 +99,9 @@ default: string;
         };
+        secondary: {
+            default: string;
+            alternative: string;
+            muted: string;
+            inverse: string;
+            disabled: string;
+        };
         error: {
@@ -86,0 +108,0 @@ default: string;

dist/colors/index.js

@@ -14,2 +14,6 @@ "use strict";
         },
+        icon: {
+            default: 'hsla(212, 8%, 45%, 1)',
+            muted: 'hsla(210, 8%, 75%, 1)',
+        },
         border: {
@@ -20,3 +24,3 @@ default: 'hsla(210, 8%, 75%, 1)',
         overlay: {
-            default: 'hsla(210, 8%, 15%, .9)',
+            default: 'hsla(0, 0%, 0%, .6)',
             inverse: 'hsla(0, 0%, 99%, 1)',
@@ -27,10 +31,17 @@ },
             alternative: 'hsla(205, 98%, 33%, 1)',
-            muted: 'hsla(206, 98%, 83%, 1)',
+            muted: 'hsla(205, 97%, 43%, .1)',
             inverse: 'hsla(0, 0%, 99%, 1)',
             disabled: 'hsla(205, 97%, 43%, .5)',
         },
+        secondary: {
+            default: 'hsla(24, 93%, 50%, 1)',
+            alternative: 'hsla(25, 93%, 40%, 1)',
+            muted: 'hsla(24, 93%, 50%, .1)',
+            inverse: 'hsla(0, 0%, 99%, 1)',
+            disabled: 'hsla(24, 93%, 50%, .5)',
+        },
         error: {
             default: 'hsla(354, 66%, 54%, 1)',
             alternative: 'hsla(354, 67%, 44%, 1)',
-            muted: 'hsla(355, 68%, 90%, 1)',
+            muted: 'hsla(354, 66%, 54%, .1)',
             inverse: 'hsla(0, 0%, 99%, 1)',
@@ -42,3 +53,3 @@ disabled: 'hsla(354, 66%, 54%, .5)',
             alternative: 'hsla(46, 100%, 52%, 1)',
-            muted: 'hsla(56, 94%, 93%, 1)',
+            muted: 'hsla(46, 100%, 62%, .1)',
             inverse: 'hsla(210, 9%, 9%, 1)',
@@ -50,3 +61,3 @@ disabled: 'hsla(46, 100%, 62%, .5)',
             alternative: 'hsla(134, 62%, 31%, 1)',
-            muted: 'hsla(133, 100%, 92%, 1)',
+            muted: 'hsla(134, 61%, 41%, .1)',
             inverse: 'hsla(0, 0%, 99%, 1)',
@@ -58,3 +69,3 @@ disabled: 'hsla(134, 61%, 41%, 1, .5)',
             alternative: 'hsla(205, 98%, 33%, 1)',
-            muted: 'hsla(206, 98%, 83%, 1)',
+            muted: 'hsla(205, 97%, 43%, .1)',
             inverse: 'hsla(0, 0%, 99%, 1)',
@@ -66,4 +77,4 @@ disabled: 'hsla(205, 97%, 43%, .5)',
         background: {
-            default: 'hsla(210, 8%, 15%, 1)',
-            alternative: 'hsla(210, 9%, 9%, 1)',
+            default: 'hsla(210, 9%, 9%, 1)',
+            alternative: 'hsla(210, 8%, 15%, 1)',
         },
@@ -73,23 +84,34 @@ text: {
             alternative: 'hsla(210, 25%, 98%, 1)',
-            muted: 'hsla(210, 8%, 85%, 1)',
+            muted: 'hsla(213, 8%, 55%, 1)',
         },
+        icon: {
+            default: 'hsla(210, 18%, 96%, 1)',
+            muted: 'hsla(213, 8%, 55%, 1)',
+        },
         border: {
-            default: 'hsla(212, 8%, 65%, 1)',
+            default: 'hsla(213, 8%, 55%, 1)',
             muted: 'hsla(213, 9%, 25%, 1)',
         },
         overlay: {
-            default: 'hsla(210, 8%, 15%, .9)',
+            default: 'hsla(0, 0%, 100%, .4)',
             inverse: 'hsla(0, 0%, 99%, 1)',
         },
         primary: {
-            default: 'hsla(205, 97%, 43%, 1)',
-            alternative: 'hsla(205, 98%, 33%, 1)',
-            muted: 'hsla(206, 98%, 83%, 1)',
+            default: 'hsla(205, 98%, 53%, 1)',
+            alternative: 'hsla(205, 97%, 63%, 1)',
+            muted: 'hsla(205, 98%, 53%, .15)',
             inverse: 'hsla(0, 0%, 99%, 1)',
-            disabled: 'hsla(205, 97%, 43%, .5)',
+            disabled: 'hsla(205, 98%, 53%, .5)',
         },
+        secondary: {
+            default: 'hsla(24, 93%, 60%, 1)',
+            alternative: 'hsla(25, 93%, 70%, 1)',
+            muted: 'hsla(24, 93%, 60%, .15)',
+            inverse: 'hsla(0, 0%, 99%, 1)',
+            disabled: 'hsla(24, 93%, 60%, .5)',
+        },
         error: {
             default: 'hsla(354, 66%, 54%, 1)',
-            alternative: 'hsla(354, 67%, 44%, 1)',
-            muted: 'hsla(355, 68%, 90%, 1)',
+            alternative: 'hsla(354, 67%, 64%, 1)',
+            muted: 'hsla(354, 66%, 54%, .15)',
             inverse: 'hsla(0, 0%, 99%, 1)',
@@ -100,4 +122,4 @@ disabled: 'hsla(354, 66%, 54%, .5)',
             default: 'hsla(46, 100%, 62%, 1)',
-            alternative: 'hsla(46, 100%, 52%, 1)',
-            muted: 'hsla(56, 94%, 93%, 1)',
+            alternative: 'hsla(47, 100%, 72%, 1)',
+            muted: 'hsla(46, 100%, 62%, .15)',
             inverse: 'hsla(210, 9%, 9%, 1)',
@@ -108,4 +130,4 @@ disabled: 'hsla(46, 100%, 62%, .5)',
             default: 'hsla(134, 61%, 41%, 1)',
-            alternative: 'hsla(134, 62%, 31%, 1)',
-            muted: 'hsla(133, 100%, 92%, 1)',
+            alternative: 'hsla(134, 61%, 61%, 1)',
+            muted: 'hsla(134, 61%, 41%, .15)',
             inverse: 'hsla(0, 0%, 99%, 1)',
@@ -115,5 +137,5 @@ disabled: 'hsla(134, 61%, 41%, 1, .5)',
         info: {
-            default: 'hsla(205, 97%, 43%, 1)',
-            alternative: 'hsla(205, 98%, 33%, 1)',
-            muted: 'hsla(206, 98%, 83%, 1)',
+            default: 'hsla(205, 98%, 53%, 1)',
+            alternative: 'hsla(205, 97%, 63%, 1)',
+            muted: 'hsla(205, 98%, 53%, .15)',
             inverse: 'hsla(0, 0%, 99%, 1)',
@@ -120,0 +142,0 @@ disabled: 'hsla(205, 97%, 43%, .5)',

package.json

 {
   "name": "@metamask/design-tokens",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Design tokens to be used throughout MetaMask products.",
@@ -17,2 +17,3 @@ "keywords": [
   },
+  "license": "MIT",
   "main": "dist/index.js",
@@ -34,5 +35,9 @@ "types": "dist/index.d.ts",
     "build:clean": "rimraf dist && yarn build",
-    "build": "tsc --project ."
+    "build": "tsc --project .",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
+  "dependencies": {},
   "devDependencies": {
+    "@babel/core": "^7.17.0",
     "@lavamoat/allow-scripts": "^1.0.5",
@@ -44,5 +49,10 @@ "@metamask/auto-changelog": "^2.3.0",
     "@metamask/eslint-config-typescript": "^9.0.1",
+    "@storybook/addon-actions": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/react": "^6.4.18",
     "@types/jest": "^26.0.13",
     "@typescript-eslint/eslint-plugin": "^4.21.0",
     "@typescript-eslint/parser": "^4.21.0",
+    "babel-loader": "^8.2.3",
     "eslint": "^7.23.0",
@@ -55,5 +65,8 @@ "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-storybook": "^0.5.6",
     "jest": "^26.4.2",
     "prettier": "^2.2.1",
     "prettier-plugin-packagejson": "^2.2.11",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
@@ -72,5 +85,8 @@ "ts-jest": "^26.3.0",
     "allowScripts": {
-      "@lavamoat/preinstall-always-fail": false
+      "@lavamoat/preinstall-always-fail": false,
+      "core-js": false,
+      "fsevents": false,
+      "core-js-pure": false
     }
   }
 }

README.md

@@ -88,1 +88,9 @@ ## Installation
    - Once you are confident the release contents are correct, publish the release using `npm publish`.
+
+### Documentation
+
+We use storybook for documentation. To get storybook up and running use:
+
+```
+yarn storybook
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32658

increased by14.52%

Number of low license alerts

0

decreased by-100%

Lines of code

441

increased by15.45%

Number of lines in readme file

96

increased by9.09%

Worsened metrics

Dev dependency count

31

increased by40.91%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes