@metamask/design-tokens - npm Package Compare versions

Comparing version 1.9.0 to 1.11.0

dist/js/colors/colors.d.ts

@@ -9,3 +9,7 @@ /**
             default: string;
+            defaultHover: string;
+            defaultPressed: string;
             alternative: string;
+            alternativeHover: string;
+            alternativePressed: string;
         };
@@ -78,2 +82,20 @@ text: {
         };
+        networks: {
+            goerli: {
+                default: string;
+                inverse: string;
+            };
+            localhost: {
+                default: string;
+                inverse: string;
+            };
+            sepolia: {
+                default: string;
+                inverse: string;
+            };
+        };
+        flask: {
+            default: string;
+            inverse: string;
+        };
     };
@@ -83,3 +105,7 @@ dark: {
             default: string;
+            defaultHover: string;
+            defaultPressed: string;
             alternative: string;
+            alternativeHover: string;
+            alternativePressed: string;
         };
@@ -152,3 +178,21 @@ text: {
         };
+        networks: {
+            goerli: {
+                default: string;
+                inverse: string;
+            };
+            localhost: {
+                default: string;
+                inverse: string;
+            };
+            sepolia: {
+                default: string;
+                inverse: string;
+            };
+        };
+        flask: {
+            default: string;
+            inverse: string;
+        };
     };
 };

dist/js/themes/darkTheme/colors.js

@@ -10,3 +10,7 @@ "use strict";
         default: '#24272A',
+        defaultHover: '#3B4046',
+        defaultPressed: '#3B4046',
         alternative: '#141618',
+        alternativeHover: '#2E3339',
+        alternativePressed: '#2E3339',
     },
@@ -79,3 +83,21 @@ text: {
     },
+    networks: {
+        goerli: {
+            default: '#1098FC',
+            inverse: '#FCFCFC',
+        },
+        localhost: {
+            default: '#BBC0C5',
+            inverse: '#FCFCFC',
+        },
+        sepolia: {
+            default: '#CFB5F0',
+            inverse: '#FCFCFC',
+        },
+    },
+    flask: {
+        default: '#8B45B6',
+        inverse: '#FCFCFC',
+    },
 };
 //# sourceMappingURL=colors.js.map

dist/js/themes/lightTheme/colors.js

@@ -10,3 +10,7 @@ "use strict";
         default: '#FFFFFF',
+        defaultHover: '#FAFBFC',
+        defaultPressed: '#FAFBFC',
         alternative: '#F2F4F6',
+        alternativeHover: '#D6D9DC',
+        alternativePressed: '#D6D9DC',
     },
@@ -79,3 +83,21 @@ text: {
     },
+    networks: {
+        goerli: {
+            default: '#1098FC',
+            inverse: '#FCFCFC',
+        },
+        localhost: {
+            default: '#BBC0C5',
+            inverse: '#FCFCFC',
+        },
+        sepolia: {
+            default: '#CFB5F0',
+            inverse: '#FCFCFC',
+        },
+    },
+    flask: {
+        default: '#8B45B6',
+        inverse: '#FCFCFC',
+    },
 };
 //# sourceMappingURL=colors.js.map

dist/js/themes/types.d.ts

@@ -27,5 +27,21 @@ import { ThemeTypography } from '../typography';
         /**
+         * {string} background.defaultHover - For component hover states that use background/default
+         */
+        defaultHover: string;
+        /**
+         * {string} background.defaultPressed - For component pressed states that use background/default.
+         */
+        defaultPressed: string;
+        /**
          * {string} background.alternative - For a subtle contrast option for neutral backgrounds. (Example: backdrop, header background)
          */
         alternative: string;
+        /**
+         * {string} background.alternativeHover - For component hover states that use background/alternative
+         */
+        alternativeHover: string;
+        /**
+         * {string} background.alternativePressed - For component pressed states that use background/alternative
+         */
+        alternativePressed: string;
     };
@@ -80,3 +96,3 @@ text: {
         /**
-         * {string} overlay.inverse - [Deprecated] Should be used for elements over an overlay
+         * {string} overlay.inverse - [DEPRECATED] Should be used for elements over an overlay
          */
@@ -109,3 +125,3 @@ alternative: string;
         /**
-         * {string} primary.disabled - [Deprecated] Should be used for
+         * {string} primary.disabled - [DEPRECATED] Should be used for disabled state
          */
@@ -120,19 +136,19 @@ disabled: string;
         /**
-         * {string} secondary.default - [Deprecated] Should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox
+         * {string} secondary.default - [DEPRECATED] Should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox
          */
         default: string;
         /**
-         * {string} secondary.alternative - [Deprecated] Should be used as an alternative to secondary.default for things such as hover states
+         * {string} secondary.alternative - [DEPRECATED] Should be used as an alternative to secondary.default for things such as hover states
          */
         alternative: string;
         /**
-         * {string} secondary.muted - [Deprecated] It’s a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination
+         * {string} secondary.muted - [DEPRECATED] It’s a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination
          */
         muted: string;
         /**
-         * {string} secondary.inverse - [Deprecated] Should be used only as the foreground element on top of primary/default and primary/alternative. It is intended to be the most contrasting color to primary/default. It should meet all AA and AAA accessibility standards such as the text or icon of a primary button
+         * {string} secondary.inverse - [DEPRECATED] Should be used only as the foreground element on top of primary/default and primary/alternative. It is intended to be the most contrasting color to primary/default. It should meet all AA and AAA accessibility standards such as the text or icon of a primary button
          */
         inverse: string;
         /**
-         * {string} secondary.disabled - [Deprecated] Should be used for all disabled secondary action components
+         * {string} secondary.disabled - [DEPRECATED] Should be used for all disabled secondary action components
          */
@@ -159,3 +175,3 @@ disabled: string;
         /**
-         * {string} error.disabled - [Deprecated] Should be used for disabled state
+         * {string} error.disabled - [DEPRECATED] Should be used for disabled state
          */
@@ -174,3 +190,3 @@ disabled: string;
         /**
-         * {string} warning.alternative - [Deprecated] Should be used as an alternative to warning/default for things like hover or pressed states
+         * {string} warning.alternative - [DEPRECATED] Should be used as an alternative to warning/default for things like hover or pressed states
          */
@@ -187,3 +203,3 @@ alternative: string;
         /**
-         * {string} warning.disabled - [Deprecated] Should be used for disabled state
+         * {string} warning.disabled - [DEPRECATED] Should be used for disabled state
          */
@@ -198,3 +214,3 @@ disabled: string;
         /**
-         * {string} success.alternative - [Deprecated] Should be used as an alternative to success/default for things like hover or pressed states
+         * {string} success.alternative - [DEPRECATED] Should be used as an alternative to success/default for things like hover or pressed states
          */
@@ -211,3 +227,3 @@ alternative: string;
         /**
-         * {string} success.disabled - [Deprecated] Should be used for disabled state
+         * {string} success.disabled - [DEPRECATED] Should be used for disabled state
          */
@@ -222,3 +238,3 @@ disabled: string;
         /**
-         * {string} info.alternative - [Deprecated] Should be used as an alternative to info/default for things like hover or pressed states
+         * {string} info.alternative - [DEPRECATED] Should be used as an alternative to info/default for things like hover or pressed states
          */
@@ -231,10 +247,52 @@ alternative: string;
         /**
-         * {string} info.inverse - SFor elements used on top of info/default. Used for text, icon or border
+         * {string} info.inverse - For elements used on top of info/default. Used for text, icon or border
          */
         inverse: string;
         /**
-         * {string} info.disabled - [Deprecated] Should be used for disabled state
+         * {string} info.disabled - [DEPRECATED] Should be used for disabled state
          */
         disabled: string;
     };
+    networks: {
+        goerli: {
+            /**
+             * {string} networks.goerli.default - For goerli test network colored elements
+             */
+            default: string;
+            /**
+             * {string} networks.goerli.inverse - For elements used on top of networks/goerli/default
+             */
+            inverse: string;
+        };
+        localhost: {
+            /**
+             * {string} networks.localhost.default - For localhost test network colored elements
+             */
+            default: string;
+            /**
+             * {string} networks.localhost.inverse - For elements used on top of networks/localhost/default
+             */
+            inverse: string;
+        };
+        sepolia: {
+            /**
+             * {string} networks.sepolia.default - For sepolia test network colored elements
+             */
+            default: string;
+            /**
+             * {string} networks.sepolia.inverse - For elements used on top of networks/sepolia/default
+             */
+            inverse: string;
+        };
+    };
+    flask: {
+        /**
+         * {string} flask.default - For Flask colored elements
+         */
+        default: string;
+        /**
+         * {string} flask.inverse - For elements used on top of flask/default
+         */
+        inverse: string;
+    };
 }
@@ -241,0 +299,0 @@ export interface Theme {

package.json

 {
   "name": "@metamask/design-tokens",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "Design tokens to be used throughout MetaMask products.",
@@ -50,2 +50,3 @@ "keywords": [
     "@storybook/addon-links": "^6.5.10",
+    "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.10",
@@ -56,2 +57,3 @@ "@types/jest": "^26.0.13",
     "babel-loader": "^8.2.3",
+    "css-loader": "5.2.7",
     "dependency-tree": "^8.1.2",
@@ -73,2 +75,5 @@ "eslint": "^7.23.0",
     "rimraf": "^3.0.2",
+    "sass": "^1.54.3",
+    "sass-loader": "10.1.1",
+    "style-loader": "2.0.0",
     "ts-jest": "^26.3.0",
@@ -75,0 +80,0 @@ "typescript": "^4.2.4"

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

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

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

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

105592

increased by2.2%

Lines of code

1539

increased by12.01%

Worsened metrics

Dev dependency count

38

increased by15.15%

Number of package files

69

decreased by-1.43%

No dependency changes