chore: updating design tokens and adding background muted

MetaMask · Dec 11, 2024 · 8074ac3 · 8074ac3
1 parent 70bdc86
commit 8074ac3
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
 
@@ -26421,7 +26421,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"