From 85797983a34868587583438aef4a8eaa323c2828 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Thu, 12 Dec 2024 11:09:10 +1300
Subject: [PATCH] chore: updating design tokens and adding background muted

---
 package.json                                        |  2 +-
 ui/components/component-library/box/box.stories.tsx |  5 +++++
 ui/css/design-system/_colors.scss                   |  1 +
 ui/helpers/constants/design-system.ts               |  2 ++
 yarn.lock                                           | 10 +++++-----
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 71e6cebc2c19..e71e89be4d47 100644
--- a/package.json
+++ b/package.json
@@ -293,7 +293,7 @@
     "@metamask/browser-passworder": "^4.3.0",
     "@metamask/contract-metadata": "^2.5.0",
     "@metamask/controller-utils": "^11.4.0",
-    "@metamask/design-tokens": "^4.0.0",
+    "@metamask/design-tokens": "^4.2.0",
     "@metamask/ens-controller": "^15.0.0",
     "@metamask/ens-resolver-snap": "^0.1.2",
     "@metamask/eth-json-rpc-filters": "^9.0.0",
diff --git a/ui/components/component-library/box/box.stories.tsx b/ui/components/component-library/box/box.stories.tsx
index 0ed75eac3f36..8da07a5daada 100644
--- a/ui/components/component-library/box/box.stories.tsx
+++ b/ui/components/component-library/box/box.stories.tsx
@@ -390,6 +390,11 @@ export const BackgroundColorStory = () => {
           BackgroundColor.backgroundAlternative
         </Text>
       </Box>
+      <Box padding={3} backgroundColor={BackgroundColor.backgroundMuted}>
+        <Text color={TextColor.textDefault}>
+          BackgroundColor.backgroundMuted
+        </Text>
+      </Box>
       <Box padding={3} backgroundColor={BackgroundColor.overlayDefault}>
         <Text color={TextColor.overlayInverse}>
           BackgroundColor.overlayDefault
diff --git a/ui/css/design-system/_colors.scss b/ui/css/design-system/_colors.scss
index 2d948b928012..da6553fd9087 100644
--- a/ui/css/design-system/_colors.scss
+++ b/ui/css/design-system/_colors.scss
@@ -1,6 +1,7 @@
 $color-map: (
   'background-default': --color-background-default,
   'background-alternative': --color-background-alternative,
+  'background-muted': --color-background-muted,
   'background-hover': --color-background-hover,
   'background-pressed': --color-background-pressed,
   'text-default': --color-text-default,
diff --git a/ui/helpers/constants/design-system.ts b/ui/helpers/constants/design-system.ts
index 8374e812b017..a1c55925e760 100644
--- a/ui/helpers/constants/design-system.ts
+++ b/ui/helpers/constants/design-system.ts
@@ -8,6 +8,7 @@
 export enum Color {
   backgroundDefault = 'background-default',
   backgroundAlternative = 'background-alternative',
+  backgroundMuted = 'background-muted',
   textDefault = 'text-default',
   textAlternative = 'text-alternative',
   textMuted = 'text-muted',
@@ -54,6 +55,7 @@ export enum Color {
 export enum BackgroundColor {
   backgroundDefault = 'background-default',
   backgroundAlternative = 'background-alternative',
+  backgroundMuted = 'background-muted',
   backgroundHover = 'background-hover',
   backgroundPressed = 'background-pressed',
   overlayDefault = 'overlay-default',
diff --git a/yarn.lock b/yarn.lock
index 95b7c07916c4..6e8e5df1456a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5068,10 +5068,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/design-tokens@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "@metamask/design-tokens@npm:4.0.0"
-  checksum: 10/337968d86bf963ccdf7ab416cc8f87ec1d35d9fb56f686dea954964edd6f5cb0067a920cb2c1f9008150d3decac51cb1b392b3e67dc1d46ca308b503ffe7eabd
+"@metamask/design-tokens@npm:^4.0.0, @metamask/design-tokens@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "@metamask/design-tokens@npm:4.2.0"
+  checksum: 10/aa92b20f8860a59b2b272e7a8a704d7e426a94030081c69c42b87ea81985c5d6585122def5906ce5a5751cb99f070efed77fabecc751ae0a7d84738f0e0ae522
   languageName: node
   linkType: hard
 
@@ -26390,7 +26390,7 @@ __metadata:
     "@metamask/build-utils": "npm:^3.0.0"
     "@metamask/contract-metadata": "npm:^2.5.0"
     "@metamask/controller-utils": "npm:^11.4.0"
-    "@metamask/design-tokens": "npm:^4.0.0"
+    "@metamask/design-tokens": "npm:^4.2.0"
     "@metamask/ens-controller": "npm:^15.0.0"
     "@metamask/ens-resolver-snap": "npm:^0.1.2"
     "@metamask/eslint-config": "npm:^9.0.0"