@metamask/design-tokens - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

CHANGELOG.md

@@ -10,2 +10,13 @@ # Changelog
 
+## [4.0.0]
+
+### Changed
+
+- chore: updated js variables based on updated json ([#709](https://github.com/MetaMask/design-tokens/pull/709))
+- chore: updated css variables based on updated json ([#708](https://github.com/MetaMask/design-tokens/pull/708))
+- chore: adding overlay.inverse colors to json ([#715](https://github.com/MetaMask/design-tokens/pull/715))
+- chore: upgrading storybook to 8.1.4 ([#703](https://github.com/MetaMask/design-tokens/pull/703))
+- chore: updating doc components and helpers ([#706](https://github.com/MetaMask/design-tokens/pull/706))
+- fix: updating brand color figma json ([#702](https://github.com/MetaMask/design-tokens/pull/702))
+
 ## [3.0.0]
@@ -294,3 +305,4 @@
 
-[Unreleased]: https://github.com/MetaMask/design-tokens/compare/v3.0.0...HEAD
+[Unreleased]: https://github.com/MetaMask/design-tokens/compare/v4.0.0...HEAD
+[4.0.0]: https://github.com/MetaMask/design-tokens/compare/v3.0.0...v4.0.0
 [3.0.0]: https://github.com/MetaMask/design-tokens/compare/v2.1.1...v3.0.0
@@ -297,0 +309,0 @@ [2.1.1]: https://github.com/MetaMask/design-tokens/compare/v2.1.0...v2.1.1

dist/index.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});require('./chunk-6CNXLMEO.js');
-require('./chunk-ARVGVDA4.js');
-
-
-var _chunkHDSKPPEOjs = require('./chunk-HDSKPPEO.js');
 require('./chunk-7HI3S7AK.js');
 
 
-var _chunkBTPWDIMFjs = require('./chunk-BTPWDIMF.js');
+var _chunkHBRFHMQMjs = require('./chunk-HBRFHMQM.js');
 require('./chunk-J4LS7B7I.js');
@@ -14,11 +10,11 @@ require('./chunk-JSD4CJVA.js');
 
-var _chunkJE7FP47Xjs = require('./chunk-JE7FP47X.js');
-require('./chunk-M4QPOI4A.js');
-require('./chunk-7YW45EKD.js');
+var _chunkPSZ3GTKOjs = require('./chunk-PSZ3GTKO.js');
+require('./chunk-KOYNKN2P.js');
+require('./chunk-SREEHNNX.js');
 require('./chunk-IA2MTBXO.js');
 
 
-var _chunk63TUQCLCjs = require('./chunk-63TUQCLC.js');
-require('./chunk-7TFM6ZBL.js');
-require('./chunk-OCPKWGI5.js');
+var _chunkOSY2MDAPjs = require('./chunk-OSY2MDAP.js');
+require('./chunk-AUXAM3NH.js');
+require('./chunk-3KC7OSMQ.js');
 require('./chunk-QOVSVHQG.js');
@@ -33,4 +29,6 @@
 require('./chunk-RS62Z6R2.js');
+require('./chunk-ARVGVDA4.js');
 
 
+var _chunkVEKU645Gjs = require('./chunk-VEKU645G.js');
 
@@ -40,3 +38,5 @@
 
-exports.brandColor = _chunkHDSKPPEOjs.brandColor; exports.colors = _chunkBTPWDIMFjs.colors; exports.darkTheme = _chunkJE7FP47Xjs.darkTheme; exports.lightTheme = _chunk63TUQCLCjs.lightTheme; exports.typography = _chunkU6CWNRHFjs.typography;
+
+
+exports.brandColor = _chunkVEKU645Gjs.brandColor; exports.colors = _chunkHBRFHMQMjs.colors; exports.darkTheme = _chunkPSZ3GTKOjs.darkTheme; exports.lightTheme = _chunkOSY2MDAPjs.lightTheme; exports.typography = _chunkU6CWNRHFjs.typography;
 //# sourceMappingURL=index.js.map

dist/js/brandColor/brandColor.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkHDSKPPEOjs = require('../../chunk-HDSKPPEO.js');
+var _chunkVEKU645Gjs = require('../../chunk-VEKU645G.js');
 
 
-exports.brandColor = _chunkHDSKPPEOjs.brandColor;
+exports.brandColor = _chunkVEKU645Gjs.brandColor;
 //# sourceMappingURL=brandColor.js.map

dist/js/brandColor/index.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../chunk-ARVGVDA4.js');
 
 
-var _chunkHDSKPPEOjs = require('../../chunk-HDSKPPEO.js');
+var _chunkVEKU645Gjs = require('../../chunk-VEKU645G.js');
 
 
-exports.brandColor = _chunkHDSKPPEOjs.brandColor;
+exports.brandColor = _chunkVEKU645Gjs.brandColor;
 //# sourceMappingURL=index.js.map

dist/js/colors/colors.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkBTPWDIMFjs = require('../../chunk-BTPWDIMF.js');
+var _chunkHBRFHMQMjs = require('../../chunk-HBRFHMQM.js');
 require('../../chunk-J4LS7B7I.js');
 require('../../chunk-JSD4CJVA.js');
-require('../../chunk-JE7FP47X.js');
-require('../../chunk-M4QPOI4A.js');
-require('../../chunk-7YW45EKD.js');
+require('../../chunk-PSZ3GTKO.js');
+require('../../chunk-KOYNKN2P.js');
+require('../../chunk-SREEHNNX.js');
 require('../../chunk-IA2MTBXO.js');
-require('../../chunk-63TUQCLC.js');
-require('../../chunk-7TFM6ZBL.js');
-require('../../chunk-OCPKWGI5.js');
+require('../../chunk-OSY2MDAP.js');
+require('../../chunk-AUXAM3NH.js');
+require('../../chunk-3KC7OSMQ.js');
 require('../../chunk-QOVSVHQG.js');
@@ -20,5 +20,7 @@ require('../../chunk-U6CWNRHF.js');
 require('../../chunk-RS62Z6R2.js');
+require('../../chunk-ARVGVDA4.js');
+require('../../chunk-VEKU645G.js');
 
 
-exports.colors = _chunkBTPWDIMFjs.colors;
+exports.colors = _chunkHBRFHMQMjs.colors;
 //# sourceMappingURL=colors.js.map

dist/js/colors/index.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../chunk-7HI3S7AK.js');
 
 
-var _chunkBTPWDIMFjs = require('../../chunk-BTPWDIMF.js');
+var _chunkHBRFHMQMjs = require('../../chunk-HBRFHMQM.js');
 require('../../chunk-J4LS7B7I.js');
 require('../../chunk-JSD4CJVA.js');
-require('../../chunk-JE7FP47X.js');
-require('../../chunk-M4QPOI4A.js');
-require('../../chunk-7YW45EKD.js');
+require('../../chunk-PSZ3GTKO.js');
+require('../../chunk-KOYNKN2P.js');
+require('../../chunk-SREEHNNX.js');
 require('../../chunk-IA2MTBXO.js');
-require('../../chunk-63TUQCLC.js');
-require('../../chunk-7TFM6ZBL.js');
-require('../../chunk-OCPKWGI5.js');
+require('../../chunk-OSY2MDAP.js');
+require('../../chunk-AUXAM3NH.js');
+require('../../chunk-3KC7OSMQ.js');
 require('../../chunk-QOVSVHQG.js');
@@ -21,6 +21,8 @@ require('../../chunk-U6CWNRHF.js');
 require('../../chunk-RS62Z6R2.js');
+require('../../chunk-ARVGVDA4.js');
+require('../../chunk-VEKU645G.js');
 
 
 
-exports.colors = _chunkBTPWDIMFjs.colors; exports.default = _chunkBTPWDIMFjs.colors;
+exports.colors = _chunkHBRFHMQMjs.colors; exports.default = _chunkHBRFHMQMjs.colors;
 //# sourceMappingURL=index.js.map

dist/js/index.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../chunk-6CNXLMEO.js');
-require('../chunk-ARVGVDA4.js');
-
-
-var _chunkHDSKPPEOjs = require('../chunk-HDSKPPEO.js');
 require('../chunk-7HI3S7AK.js');
 
 
-var _chunkBTPWDIMFjs = require('../chunk-BTPWDIMF.js');
+var _chunkHBRFHMQMjs = require('../chunk-HBRFHMQM.js');
 require('../chunk-J4LS7B7I.js');
@@ -14,11 +10,11 @@ require('../chunk-JSD4CJVA.js');
 
-var _chunkJE7FP47Xjs = require('../chunk-JE7FP47X.js');
-require('../chunk-M4QPOI4A.js');
-require('../chunk-7YW45EKD.js');
+var _chunkPSZ3GTKOjs = require('../chunk-PSZ3GTKO.js');
+require('../chunk-KOYNKN2P.js');
+require('../chunk-SREEHNNX.js');
 require('../chunk-IA2MTBXO.js');
 
 
-var _chunk63TUQCLCjs = require('../chunk-63TUQCLC.js');
-require('../chunk-7TFM6ZBL.js');
-require('../chunk-OCPKWGI5.js');
+var _chunkOSY2MDAPjs = require('../chunk-OSY2MDAP.js');
+require('../chunk-AUXAM3NH.js');
+require('../chunk-3KC7OSMQ.js');
 require('../chunk-QOVSVHQG.js');
@@ -33,4 +29,6 @@
 require('../chunk-RS62Z6R2.js');
+require('../chunk-ARVGVDA4.js');
 
 
+var _chunkVEKU645Gjs = require('../chunk-VEKU645G.js');
 
@@ -40,3 +38,5 @@
 
-exports.brandColor = _chunkHDSKPPEOjs.brandColor; exports.colors = _chunkBTPWDIMFjs.colors; exports.darkTheme = _chunkJE7FP47Xjs.darkTheme; exports.lightTheme = _chunk63TUQCLCjs.lightTheme; exports.typography = _chunkU6CWNRHFjs.typography;
+
+
+exports.brandColor = _chunkVEKU645Gjs.brandColor; exports.colors = _chunkHBRFHMQMjs.colors; exports.darkTheme = _chunkPSZ3GTKOjs.darkTheme; exports.lightTheme = _chunkOSY2MDAPjs.lightTheme; exports.typography = _chunkU6CWNRHFjs.typography;
 //# sourceMappingURL=index.js.map

dist/js/themes/darkTheme/colors.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk7YW45EKDjs = require('../../../chunk-7YW45EKD.js');
+var _chunkSREEHNNXjs = require('../../../chunk-SREEHNNX.js');
+require('../../../chunk-ARVGVDA4.js');
+require('../../../chunk-VEKU645G.js');
 
 
-exports.colors = _chunk7YW45EKDjs.colors;
+exports.colors = _chunkSREEHNNXjs.colors;
 //# sourceMappingURL=colors.js.map

dist/js/themes/darkTheme/darkTheme.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkJE7FP47Xjs = require('../../../chunk-JE7FP47X.js');
-require('../../../chunk-M4QPOI4A.js');
-require('../../../chunk-7YW45EKD.js');
+var _chunkPSZ3GTKOjs = require('../../../chunk-PSZ3GTKO.js');
+require('../../../chunk-KOYNKN2P.js');
+require('../../../chunk-SREEHNNX.js');
 require('../../../chunk-QOVSVHQG.js');
@@ -13,5 +13,7 @@ require('../../../chunk-U6CWNRHF.js');
 require('../../../chunk-RS62Z6R2.js');
+require('../../../chunk-ARVGVDA4.js');
+require('../../../chunk-VEKU645G.js');
 
 
-exports.darkTheme = _chunkJE7FP47Xjs.darkTheme;
+exports.darkTheme = _chunkPSZ3GTKOjs.darkTheme;
 //# sourceMappingURL=darkTheme.js.map

dist/js/themes/darkTheme/index.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../../chunk-JSD4CJVA.js');
 
 
-var _chunkJE7FP47Xjs = require('../../../chunk-JE7FP47X.js');
-require('../../../chunk-M4QPOI4A.js');
-require('../../../chunk-7YW45EKD.js');
+var _chunkPSZ3GTKOjs = require('../../../chunk-PSZ3GTKO.js');
+require('../../../chunk-KOYNKN2P.js');
+require('../../../chunk-SREEHNNX.js');
 require('../../../chunk-QOVSVHQG.js');
@@ -14,5 +14,7 @@ require('../../../chunk-U6CWNRHF.js');
 require('../../../chunk-RS62Z6R2.js');
+require('../../../chunk-ARVGVDA4.js');
+require('../../../chunk-VEKU645G.js');
 
 
-exports.darkTheme = _chunkJE7FP47Xjs.darkTheme;
+exports.darkTheme = _chunkPSZ3GTKOjs.darkTheme;
 //# sourceMappingURL=index.js.map

dist/js/themes/darkTheme/shadows.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkM4QPOI4Ajs = require('../../../chunk-M4QPOI4A.js');
-require('../../../chunk-7YW45EKD.js');
+var _chunkKOYNKN2Pjs = require('../../../chunk-KOYNKN2P.js');
+require('../../../chunk-SREEHNNX.js');
+require('../../../chunk-ARVGVDA4.js');
+require('../../../chunk-VEKU645G.js');
 
 
-exports.shadows = _chunkM4QPOI4Ajs.shadows;
+exports.shadows = _chunkKOYNKN2Pjs.shadows;
 //# sourceMappingURL=shadows.js.map

dist/js/themes/index.js

@@ -5,11 +5,11 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../chunk-J4LS7B7I.js');
 
-var _chunkJE7FP47Xjs = require('../../chunk-JE7FP47X.js');
-require('../../chunk-M4QPOI4A.js');
-require('../../chunk-7YW45EKD.js');
+var _chunkPSZ3GTKOjs = require('../../chunk-PSZ3GTKO.js');
+require('../../chunk-KOYNKN2P.js');
+require('../../chunk-SREEHNNX.js');
 require('../../chunk-IA2MTBXO.js');
 
 
-var _chunk63TUQCLCjs = require('../../chunk-63TUQCLC.js');
-require('../../chunk-7TFM6ZBL.js');
-require('../../chunk-OCPKWGI5.js');
+var _chunkOSY2MDAPjs = require('../../chunk-OSY2MDAP.js');
+require('../../chunk-AUXAM3NH.js');
+require('../../chunk-3KC7OSMQ.js');
 require('../../chunk-QOVSVHQG.js');
@@ -22,6 +22,8 @@ require('../../chunk-U6CWNRHF.js');
 require('../../chunk-RS62Z6R2.js');
+require('../../chunk-ARVGVDA4.js');
+require('../../chunk-VEKU645G.js');
 
 
 
-exports.darkTheme = _chunkJE7FP47Xjs.darkTheme; exports.lightTheme = _chunk63TUQCLCjs.lightTheme;
+exports.darkTheme = _chunkPSZ3GTKOjs.darkTheme; exports.lightTheme = _chunkOSY2MDAPjs.lightTheme;
 //# sourceMappingURL=index.js.map

dist/js/themes/lightTheme/colors.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkOCPKWGI5js = require('../../../chunk-OCPKWGI5.js');
+var _chunk3KC7OSMQjs = require('../../../chunk-3KC7OSMQ.js');
+require('../../../chunk-ARVGVDA4.js');
+require('../../../chunk-VEKU645G.js');
 
 
-exports.colors = _chunkOCPKWGI5js.colors;
+exports.colors = _chunk3KC7OSMQjs.colors;
 //# sourceMappingURL=colors.js.map

dist/js/themes/lightTheme/index.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../../chunk-IA2MTBXO.js');
 
 
-var _chunk63TUQCLCjs = require('../../../chunk-63TUQCLC.js');
-require('../../../chunk-7TFM6ZBL.js');
-require('../../../chunk-OCPKWGI5.js');
+var _chunkOSY2MDAPjs = require('../../../chunk-OSY2MDAP.js');
+require('../../../chunk-AUXAM3NH.js');
+require('../../../chunk-3KC7OSMQ.js');
 require('../../../chunk-QOVSVHQG.js');
@@ -14,5 +14,7 @@ require('../../../chunk-U6CWNRHF.js');
 require('../../../chunk-RS62Z6R2.js');
+require('../../../chunk-ARVGVDA4.js');
+require('../../../chunk-VEKU645G.js');
 
 
-exports.lightTheme = _chunk63TUQCLCjs.lightTheme;
+exports.lightTheme = _chunkOSY2MDAPjs.lightTheme;
 //# sourceMappingURL=index.js.map

dist/js/themes/lightTheme/lightTheme.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk63TUQCLCjs = require('../../../chunk-63TUQCLC.js');
-require('../../../chunk-7TFM6ZBL.js');
-require('../../../chunk-OCPKWGI5.js');
+var _chunkOSY2MDAPjs = require('../../../chunk-OSY2MDAP.js');
+require('../../../chunk-AUXAM3NH.js');
+require('../../../chunk-3KC7OSMQ.js');
 require('../../../chunk-QOVSVHQG.js');
@@ -13,5 +13,7 @@ require('../../../chunk-U6CWNRHF.js');
 require('../../../chunk-RS62Z6R2.js');
+require('../../../chunk-ARVGVDA4.js');
+require('../../../chunk-VEKU645G.js');
 
 
-exports.lightTheme = _chunk63TUQCLCjs.lightTheme;
+exports.lightTheme = _chunkOSY2MDAPjs.lightTheme;
 //# sourceMappingURL=lightTheme.js.map

dist/js/themes/lightTheme/shadows.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk7TFM6ZBLjs = require('../../../chunk-7TFM6ZBL.js');
-require('../../../chunk-OCPKWGI5.js');
+var _chunkAUXAM3NHjs = require('../../../chunk-AUXAM3NH.js');
+require('../../../chunk-3KC7OSMQ.js');
+require('../../../chunk-ARVGVDA4.js');
+require('../../../chunk-VEKU645G.js');
 
 
-exports.shadows = _chunk7TFM6ZBLjs.shadows;
+exports.shadows = _chunkAUXAM3NHjs.shadows;
 //# sourceMappingURL=shadows.js.map

dist/types/js/brandColor/brandColor.types.d.ts

 export declare type BrandColor = {
-    /** white/white000: #ffffff */
-    white000: string;
-    /** white/white010: #fcfcfc */
-    white010: string;
-    /** black/black000: #000000 */
-    black000: string;
-    /** grey/grey030: #fafbfc */
-    grey030: string;
-    /** grey/grey040: #f2f4f6 */
-    grey040: string;
     /** grey/grey100: #d6d9dc */
@@ -26,4 +16,2 @@ grey100: string;
     grey700: string;
-    /** grey/grey750: #2e3339 */
-    grey750: string;
     /** grey/grey800: #24272a */
@@ -33,4 +21,10 @@ grey800: string;
     grey900: string;
-    /** blue/blue000: #eaf6ff */
-    blue000: string;
+    /** grey/grey1000: #000000 */
+    grey1000: string;
+    /** grey/grey050: #f2f4f6 */
+    grey050: string;
+    /** grey/grey000: #ffffff */
+    grey000: string;
+    /** grey/grey025: #fafbfc */
+    grey025: string;
     /** blue/blue100: #a7d9fe */
@@ -54,35 +48,17 @@ blue100: string;
     blue900: string;
-    /** orange/orange000: #fef5ef */
-    orange000: string;
-    /** orange/orange100: #fde2cf */
-    orange100: string;
-    /** orange/orange200: #fbc49d */
-    orange200: string;
-    /** orange/orange300: #faa66c */
-    orange300: string;
-    /** orange/orange400: #f8883b */
-    orange400: string;
-    /** orange/orange500: #f66a0a */
-    orange500: string;
-    /** orange/orange600: #c65507 */
-    orange600: string;
-    /** orange/orange700: #954005 */
-    orange700: string;
-    /** orange/orange800: #632b04 */
-    orange800: string;
-    /** orange/orange900: #321602 */
-    orange900: string;
-    /** green/green000: #f3fcf5 */
-    green000: string;
-    /** green/green100: #d6ffdf */
+    /** blue/blue050: #eaf6ff */
+    blue050: string;
+    /** blue/blue025: #eaf6ff */
+    blue025: string;
+    /** green/green100: #afecbd */
     green100: string;
-    /** green/green200: #afecbd */
+    /** green/green200: #5dd879 */
     green200: string;
-    /** green/green300: #86e29b */
+    /** green/green300: #28a745 */
     green300: string;
-    /** green/green400: #5dd879 */
+    /** green/green400: #28a745 */
     green400: string;
-    /** green/green500: #28a745 */
+    /** green/green500: #1c8234 */
     green500: string;
-    /** green/green600: #1e7e34 */
+    /** green/green600: #145523 */
     green600: string;
@@ -95,4 +71,6 @@ /** green/green700: #145523 */
     green900: string;
-    /** red/red000: #fcf2f3 */
-    red000: string;
+    /** green/green050: #d6ffdf */
+    green050: string;
+    /** green/green025: #f3fcf5 */
+    green025: string;
     /** red/red100: #f7d5d8 */
@@ -108,29 +86,107 @@ red100: string;
     red500: string;
-    /** red/red600: #b92534 */
+    /** red/red600: #8e1d28 */
     red600: string;
-    /** red/red700: #8e1d28 */
+    /** red/red700: #64141c */
     red700: string;
-    /** red/red800: #64141c */
+    /** red/red800: #3a0c10 */
     red800: string;
     /** red/red900: #3a0c10 */
     red900: string;
-    /** purple/purple500: #8b45b6 */
-    purple500: string;
-    /** violet/violet300: #cfb5f0 */
-    violet300: string;
-    /** yellow/yellow000: #fffdf8 */
-    yellow000: string;
-    /** yellow/yellow100: #fefcde */
+    /** red/red050: #fcf2f3 */
+    red050: string;
+    /** red/red025: #fcf2f3 */
+    red025: string;
+    /** yellow/yellow100: #ffdf70 */
     yellow100: string;
-    /** yellow/yellow200: #fff2c5 */
+    /** yellow/yellow200: #ffc70a */
     yellow200: string;
-    /** yellow/yellow300: #ffeaa3 */
+    /** yellow/yellow300: #f8883b */
     yellow300: string;
-    /** yellow/yellow400: #ffdf70 */
+    /** yellow/yellow400: #f66a0a */
     yellow400: string;
-    /** yellow/yellow500: #ffd33d */
+    /** yellow/yellow500: #bf5208 */
     yellow500: string;
-    /** yellow/yellow600: #ffc70a */
+    /** yellow/yellow600: #954005 */
     yellow600: string;
+    /** yellow/yellow700: #632b04 */
+    yellow700: string;
+    /** yellow/yellow800: #321602 */
+    yellow800: string;
+    /** yellow/yellow900: #321602 */
+    yellow900: string;
+    /** yellow/yellow050: #fff2c5 */
+    yellow050: string;
+    /** yellow/yellow025: #fefcde */
+    yellow025: string;
+    /** orange/orange100: #fbc49d */
+    orange100: string;
+    /** orange/orange200: #faa66c */
+    orange200: string;
+    /** orange/orange300: #f8883b */
+    orange300: string;
+    /** orange/orange400: #f66a0a */
+    orange400: string;
+    /** orange/orange500: #bf5208 */
+    orange500: string;
+    /** orange/orange600: #954005 */
+    orange600: string;
+    /** orange/orange700: #632b04 */
+    orange700: string;
+    /** orange/orange800: #321602 */
+    orange800: string;
+    /** orange/orange900: #321602 */
+    orange900: string;
+    /** orange/orange050: #fde2cf */
+    orange050: string;
+    /** orange/orange025: #fef5ef */
+    orange025: string;
+    /** purple/purple100: #efd2ff */
+    purple100: string;
+    /** purple/purple200: #cfb5f0 */
+    purple200: string;
+    /** purple/purple300: #d27dff */
+    purple300: string;
+    /** purple/purple400: #b864f5 */
+    purple400: string;
+    /** purple/purple500: #8b45b6 */
+    purple500: string;
+    /** purple/purple600: #6c2ab2 */
+    purple600: string;
+    /** purple/purple700: #4c1178 */
+    purple700: string;
+    /** purple/purple800: #32054d */
+    purple800: string;
+    /** purple/purple900: #280a00 */
+    purple900: string;
+    /** purple/purple050: #fbf2ff */
+    purple050: string;
+    /** purple/purple025: #fcf6ff */
+    purple025: string;
+    /** lime/lime100: #b8ef4a */
+    lime100: string;
+    /** lime/lime200: #95ca45 */
+    lime200: string;
+    /** lime/lime300: #7ab040 */
+    lime300: string;
+    /** lime/lime400: #64993d */
+    lime400: string;
+    /** lime/lime500: #457a39 */
+    lime500: string;
+    /** lime/lime600: #275b35 */
+    lime600: string;
+    /** lime/lime700: #093a31 */
+    lime700: string;
+    /** lime/lime800: #022321 */
+    lime800: string;
+    /** lime/lime900: #011515 */
+    lime900: string;
+    /** lime/lime025: #effed9 */
+    lime025: string;
+    /** lime/lime050: #e3febd */
+    lime050: string;
+    /** white: #ffffff */
+    white: string;
+    /** black: #000000 */
+    black: string;
 };
 //# sourceMappingURL=brandColor.types.d.ts.map

dist/types/js/colors/colors.d.ts

@@ -33,7 +33,9 @@ /**
             default: string;
+            alternative: string;
             inverse: string;
-            alternative: string;
         };
         shadow: {
             default: string;
+            primary: string;
+            error: string;
         };
@@ -47,12 +49,3 @@ primary: {
             inverse: string;
-            disabled: string;
-            shadow: string;
         };
-        secondary: {
-            default: string;
-            alternative: string;
-            muted: string;
-            inverse: string;
-            disabled: string;
-        };
         error: {
@@ -65,4 +58,2 @@ default: string;
             inverse: string;
-            disabled: string;
-            shadow: string;
         };
@@ -73,6 +64,4 @@ warning: {
             defaultPressed: string;
-            alternative: string;
             muted: string;
             inverse: string;
-            disabled: string;
         };
@@ -83,28 +72,10 @@ success: {
             defaultPressed: string;
-            alternative: string;
             muted: string;
             inverse: string;
-            disabled: string;
         };
         info: {
             default: string;
-            alternative: string;
             muted: string;
             inverse: string;
-            disabled: string;
         };
-        networks: {
-            goerli: {
-                default: string;
-                inverse: string;
-            };
-            localhost: {
-                default: string;
-                inverse: string;
-            };
-            sepolia: {
-                default: string;
-                inverse: string;
-            };
-        };
         flask: {
@@ -142,7 +113,9 @@ default: string;
             default: string;
+            alternative: string;
             inverse: string;
-            alternative: string;
         };
         shadow: {
             default: string;
+            primary: string;
+            error: string;
         };
@@ -156,12 +129,3 @@ primary: {
             inverse: string;
-            disabled: string;
-            shadow: string;
         };
-        secondary: {
-            default: string;
-            alternative: string;
-            muted: string;
-            inverse: string;
-            disabled: string;
-        };
         error: {
@@ -174,4 +138,2 @@ default: string;
             inverse: string;
-            disabled: string;
-            shadow: string;
         };
@@ -182,6 +144,4 @@ warning: {
             defaultPressed: string;
-            alternative: string;
             muted: string;
             inverse: string;
-            disabled: string;
         };
@@ -192,28 +152,10 @@ success: {
             defaultPressed: string;
-            alternative: string;
             muted: string;
             inverse: string;
-            disabled: string;
         };
         info: {
             default: string;
-            alternative: string;
             muted: string;
             inverse: string;
-            disabled: string;
         };
-        networks: {
-            goerli: {
-                default: string;
-                inverse: string;
-            };
-            localhost: {
-                default: string;
-                inverse: string;
-            };
-            sepolia: {
-                default: string;
-                inverse: string;
-            };
-        };
         flask: {
@@ -220,0 +162,0 @@ default: string;

dist/types/js/themes/darkTheme/colors.d.ts

 import type { ThemeColors } from '../types';
-/**
- * Dark theme colors
- */
 export declare const colors: ThemeColors;
 //# sourceMappingURL=colors.d.ts.map

dist/types/js/themes/lightTheme/colors.d.ts

 import type { ThemeColors } from '../types';
-/**
- * Light theme colors
- */
 export declare const colors: ThemeColors;
 //# sourceMappingURL=colors.d.ts.map

dist/types/js/themes/types.d.ts

@@ -99,15 +99,23 @@ import type { ThemeTypography } from '../typography';
         /**
-         * {string} overlay.alternative - For a stronger shading layer option behind modality screens
+         * {string} overlay.alternative - For a stronger shade of screen
          */
-        inverse: string;
+        alternative: string;
         /**
-         * {string} overlay.inverse - [DEPRECATED] Should be used for elements over an overlay
+         * {string} overlay.inverse - For elements used on top of overlay/alternative. Used for text, icon or border
          */
-        alternative: string;
+        inverse: string;
     };
     shadow: {
         /**
-         * {string} shadow.default - For neutral shadows
+         * {string} shadow.default - For neutral drop shadow color.
          */
         default: string;
+        /**
+         * {string} shadow.primary - For primary drop shadow color.
+         */
+        primary: string;
+        /**
+         * {string} shadow.default - For critical/danger drop shadow color.
+         */
+        error: string;
     };
@@ -139,33 +147,3 @@ primary: {
         inverse: string;
-        /**
-         * {string} primary.disabled - [DEPRECATED] Should be used for disabled state
-         */
-        disabled: string;
-        /**
-         * {string} primary.shadow - For primary button hover
-         */
-        shadow: string;
     };
-    secondary: {
-        /**
-         * {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
-         */
-        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
-         */
-        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
-         */
-        inverse: string;
-        /**
-         * {string} secondary.disabled - [DEPRECATED] Should be used for all disabled secondary action components
-         */
-        disabled: string;
-    };
     error: {
@@ -196,10 +174,2 @@ /**
         inverse: string;
-        /**
-         * {string} error.disabled - [DEPRECATED] Should be used for disabled state
-         */
-        disabled: string;
-        /**
-         * {string} error.shadow - For error danger/critical button hover
-         */
-        shadow: string;
     };
@@ -220,6 +190,2 @@ warning: {
         /**
-         * {string} warning.alternative - [DEPRECATED] Should be used as an alternative to warning/default for things like hover or pressed states
-         */
-        alternative: string;
-        /**
          * {string} warning.muted - For lowest contrast background used in warning elements. (Example: notification background)
@@ -232,6 +198,2 @@ */
         inverse: string;
-        /**
-         * {string} warning.disabled - [DEPRECATED] Should be used for disabled state
-         */
-        disabled: string;
     };
@@ -252,6 +214,2 @@ success: {
         /**
-         * {string} success.alternative - [DEPRECATED] Should be used as an alternative to success/default for things like hover or pressed states
-         */
-        alternative: string;
-        /**
          * {string} success.muted - For lowest contrast background used in success semantic. (Example: notification background)
@@ -264,6 +222,2 @@ */
         inverse: string;
-        /**
-         * {string} success.disabled - [DEPRECATED] Should be used for disabled state
-         */
-        disabled: string;
     };
@@ -276,6 +230,2 @@ info: {
         /**
-         * {string} info.alternative - [DEPRECATED] Should be used as an alternative to info/default for things like hover or pressed states
-         */
-        alternative: string;
-        /**
          * {string} info.muted - For lowest contrast background used in informational semantic. (Example: notification background)
@@ -288,39 +238,3 @@ */
         inverse: string;
-        /**
-         * {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: {
@@ -327,0 +241,0 @@ /**

package.json

 {
   "name": "@metamask/design-tokens",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Design tokens to be used throughout MetaMask products",
@@ -59,3 +59,3 @@ "keywords": [
     "@babel/preset-react": "^7.24.1",
-    "@chromatic-com/storybook": "^1.4.0",
+    "@chromatic-com/storybook": "^1.5.0",
     "@lavamoat/allow-scripts": "^3.0.4",
@@ -68,9 +68,9 @@ "@lavamoat/preinstall-always-fail": "^2.0.0",
     "@metamask/eslint-config-typescript": "^12.1.0",
-    "@storybook/addon-essentials": "^8.1.2",
-    "@storybook/addon-interactions": "^8.1.2",
-    "@storybook/addon-links": "^8.1.2",
-    "@storybook/blocks": "^8.1.2",
-    "@storybook/react": "^8.1.2",
-    "@storybook/react-vite": "^8.1.2",
-    "@storybook/test": "^8.1.2",
+    "@storybook/addon-essentials": "^8.1.4",
+    "@storybook/addon-interactions": "^8.1.4",
+    "@storybook/addon-links": "^8.1.4",
+    "@storybook/blocks": "^8.1.4",
+    "@storybook/react": "^8.1.4",
+    "@storybook/react-vite": "^8.1.4",
+    "@storybook/test": "^8.1.4",
     "@types/babel__core": "^7",
@@ -105,3 +105,3 @@ "@types/jest": "^28.1.6",
     "sass": "^1.75.0",
-    "storybook": "^8.1.2",
+    "storybook": "^8.1.4",
     "ts-jest": "^28.0.7",
@@ -108,0 +108,0 @@ "ts-node": "^10.7.0",

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

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

Improved metrics

Total package byte prevSize

227300

increased by13.42%

Lines of code

2932

increased by9.69%

No dependency changes