From 56e48a7e55e299ed2719d1e1d07d8dd4bf61518b Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Wed, 3 May 2023 06:18:56 -0700
Subject: [PATCH] Fixing broken responsive box background color prop and color
 fix (#18978)

---
 ui/components/ui/box/box.scss         |  2 +-
 ui/components/ui/box/box.stories.tsx  | 25 ++++++++++++++++++++-----
 ui/helpers/constants/design-system.ts |  2 +-
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/ui/components/ui/box/box.scss b/ui/components/ui/box/box.scss
index dec3792ac..4a84e7a20 100644
--- a/ui/components/ui/box/box.scss
+++ b/ui/components/ui/box/box.scss
@@ -376,7 +376,7 @@ $attributesToApplyExtraProperties: margin;
   @each $breakpoint, $min-width in $screen-sizes-map {
     @each $variant, $color in design-system.$color-map {
       @media screen and (min-width: $min-width) {
-        &--#{$breakpoint}\background-color-#{$variant} {
+        &--#{$breakpoint}\:background-color-#{$variant} {
           background-color: var($color);
         }
       }
diff --git a/ui/components/ui/box/box.stories.tsx b/ui/components/ui/box/box.stories.tsx
index 7dff8d94a..a1c6219c1 100644
--- a/ui/components/ui/box/box.stories.tsx
+++ b/ui/components/ui/box/box.stories.tsx
@@ -606,21 +606,30 @@ export const ResponsiveProps = () => {
       >
         <Box
           padding={[4, 8]}
-          backgroundColor={BackgroundColor.backgroundAlternative}
+          backgroundColor={[
+            BackgroundColor.backgroundAlternative,
+            BackgroundColor.primaryMuted,
+          ]}
           borderColor={BorderColor.borderMuted}
         >
           responsive
         </Box>
         <Box
           padding={[4, 8]}
-          backgroundColor={BackgroundColor.backgroundAlternative}
+          backgroundColor={[
+            BackgroundColor.backgroundAlternative,
+            BackgroundColor.primaryMuted,
+          ]}
           borderColor={BorderColor.borderMuted}
         >
           props
         </Box>
         <Box
           padding={[4, 8]}
-          backgroundColor={BackgroundColor.backgroundAlternative}
+          backgroundColor={[
+            BackgroundColor.backgroundAlternative,
+            BackgroundColor.primaryMuted,
+          ]}
           borderColor={BorderColor.borderMuted}
         >
           example
@@ -633,7 +642,10 @@ export const ResponsiveProps = () => {
             BorderRadius.MD,
             BorderRadius.LG,
           ]}
-          backgroundColor={BackgroundColor.backgroundAlternative}
+          backgroundColor={[
+            BackgroundColor.backgroundAlternative,
+            BackgroundColor.primaryMuted,
+          ]}
           borderColor={BorderColor.borderMuted}
         >
           Responsive Border Radius 1
@@ -646,7 +658,10 @@ export const ResponsiveProps = () => {
             BorderRadius.none,
             BorderRadius.full,
           ]}
-          backgroundColor={BackgroundColor.backgroundAlternative}
+          backgroundColor={[
+            BackgroundColor.backgroundAlternative,
+            BackgroundColor.primaryMuted,
+          ]}
           borderColor={BorderColor.borderMuted}
         >
           Responsive Border Radius 2
diff --git a/ui/helpers/constants/design-system.ts b/ui/helpers/constants/design-system.ts
index 06d2ba980..0fb7a5faf 100644
--- a/ui/helpers/constants/design-system.ts
+++ b/ui/helpers/constants/design-system.ts
@@ -63,7 +63,7 @@ export enum BackgroundColor {
   primaryAlternative = 'primary-alternative',
   primaryMuted = 'primary-muted',
   errorDefault = 'error-default',
-  errorAlternative = 'error-Alternative',
+  errorAlternative = 'error-alternative',
   errorMuted = 'error-muted',
   warningDefault = 'warning-default',
   warningAlternative = 'warning-alternative',