diff --git a/packages/apps/docs/src/components/Layout/components/Footer/styles.css.ts b/packages/apps/docs/src/components/Layout/components/Footer/styles.css.ts
index 9e49b3a0263..1dc94ff2e53 100644
--- a/packages/apps/docs/src/components/Layout/components/Footer/styles.css.ts
+++ b/packages/apps/docs/src/components/Layout/components/Footer/styles.css.ts
@@ -5,7 +5,7 @@ import { $$footerMenu, $$pageWidth } from '../../global.css';
 export const footerWrapperClass = style([
   sprinkles({
     position: 'relative',
-    background: '$gray90',
+    backgroundColor: '$gray90',
     marginTop: '$40',
   }),
   {
diff --git a/packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts b/packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts
index 71c25bf90e9..58ec01eb797 100644
--- a/packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts
+++ b/packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts
@@ -7,7 +7,7 @@ export const menuClass = style([
     position: 'fixed',
     height: '100%',
     width: '100%',
-    background: '$background',
+    backgroundColor: '$background',
     overflow: 'hidden',
     top: '$17',
     bottom: 0,
@@ -31,7 +31,7 @@ export const menuClass = style([
         bottom: 'auto',
         height: `calc(100vh - ${vars.sizes.$18})`,
         transform: 'translateX(0)',
-        background: 'transparent',
+        backgroundColor: 'transparent',
         paddingBottom: vars.sizes.$40,
       },
     }),
@@ -76,7 +76,7 @@ export const menuBackClass = style([
     cursor: 'pointer',
   }),
   {
-    background: 'rgba(0,0,0,.5)',
+    backgroundColor: 'rgba(0,0,0,.5)',
     border: 0,
     opacity: 0,
     transform: 'translateX(-100%)',
diff --git a/packages/apps/docs/src/components/Layout/components/SideMenu/sideMenu.css.ts b/packages/apps/docs/src/components/Layout/components/SideMenu/sideMenu.css.ts
index 4c0cca9a031..e3159e774b6 100644
--- a/packages/apps/docs/src/components/Layout/components/SideMenu/sideMenu.css.ts
+++ b/packages/apps/docs/src/components/Layout/components/SideMenu/sideMenu.css.ts
@@ -44,11 +44,9 @@ export const sideMenuTitleClass = style([
     marginY: '$4',
     textAlign: 'left',
     fontSize: '$sm',
+    backgroundColor: 'transparent',
+    border: 'none',
   }),
-  {
-    background: 'transparent',
-    border: '0',
-  },
 ]);
 
 export const sideMenuTitleButtonClass = style([
diff --git a/packages/apps/docs/src/components/Markdown/Code/style.css.ts b/packages/apps/docs/src/components/Markdown/Code/style.css.ts
index 5767e2a98c5..145b573ce7f 100644
--- a/packages/apps/docs/src/components/Markdown/Code/style.css.ts
+++ b/packages/apps/docs/src/components/Markdown/Code/style.css.ts
@@ -164,7 +164,7 @@ export const codeTitle = style([
     display: 'none',
     alignItems: 'center',
     fontFamily: '$main',
-    background: '$blue70',
+    backgroundColor: '$blue70',
     color: '$white',
     fontWeight: '$bold',
     textTransform: 'capitalize',
diff --git a/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/styles.css.ts b/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/styles.css.ts
index a65d2401f56..36cb6557299 100644
--- a/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/styles.css.ts
+++ b/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/styles.css.ts
@@ -31,7 +31,7 @@ export const accountFormStyle = style([
     paddingTop: '$10',
     paddingRight: '$10',
     paddingLeft: '$10',
-    background: '$gray40',
+    backgroundColor: '$gray40',
   }),
   {
     alignSelf: 'stretch',
@@ -55,7 +55,7 @@ export const formHeaderStyle = style([
     paddingLeft: '$10',
     alignItems: 'flex-start',
     gap: '$2',
-    background: '$gray40',
+    backgroundColor: '$gray40',
   }),
   {
     alignSelf: 'stretch',
diff --git a/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.css.ts b/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.css.ts
index 48812190af4..f9d0fd439b2 100644
--- a/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.css.ts
+++ b/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.css.ts
@@ -82,7 +82,7 @@ export const CardContainer = style([
     borderRadius: '$sm',
     alignItems: 'flex-start',
     fontSize: '$sm',
-    background: {
+    backgroundColor: {
       lightMode: '$white',
       darkMode: '$gray100',
     },
diff --git a/packages/libs/react-ui/src/styles/sprinkles.css.ts b/packages/libs/react-ui/src/styles/sprinkles.css.ts
index 178f2f14eae..501f2c875de 100644
--- a/packages/libs/react-ui/src/styles/sprinkles.css.ts
+++ b/packages/libs/react-ui/src/styles/sprinkles.css.ts
@@ -26,6 +26,7 @@ const systemProperties = defineProperties({
     wordBreak: ['normal', 'keep-all', 'break-word', 'break-all'],
     listStyleType: ['none'],
     objectFit: ['cover', 'contain'],
+    background: ['none'],
   },
 });
 
@@ -37,7 +38,6 @@ const colorProperties = defineProperties({
   defaultCondition: 'lightMode',
   properties: {
     color: { ...vars.colors, inherit: 'inherit' },
-    background: { ...vars.colors, none: 'none' },
     backgroundColor: { ...vars.colors, transparent: 'transparent' },
     borderColor: vars.colors,
   },